手机端单行文字两端对齐：用css伪类实现

今天在做项目的时候碰到这个问题：右侧红线内的小标题单行两端对齐。

两端对齐的css属性我们知道是text-align:justify，但是这个属性有它的局限性：
1.display只能为inline或inline-block
2.多行文字才能实现两端对齐。
也就是说，在现在的情况下，小标题的单行文字仅仅使用text-align:justify是实现不了两端对齐的。
那我们就想办法把这个『单行文字』变成『多行文字』

怎样让一块内容后面多出东西，而又不会使页面多出垃圾元素呢？嘿嘿，类比清除浮动用到的方法，我们可以很快就想到使用:after伪类来解决问题。

html

<div class="small-unit">
    <label class="label">开发</label>
    <div class="msg">阿斯顿</div>
</div>
<div class="small-unit">
    <label class="label">开发商</label>
    <div class="msg">阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿</div>
</div>
<div class="small-unit">
    <label class="label">开发周期</label>
    <div class="msg">阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿阿斯顿</div>
</div>

css

.small-unit{
    padding: 10px 0;
}
.label{
    position: absolute;
    display: inline-block;
    width: 4em;
    height: 40px;
    text-align: justify;
    overflow: hidden;
}
.label:after{
    display: inline-block;
    content: '';
    width: 4em;
    height: 40px;
    text-align: justify;
    overflow: hidden;
}
.msg{
    display: inline-block;
    margin-left: 5em;
    position: relative;
}
.msg:before{
    content: '：';
    position: absolute;
    left: -1em;
}

效果图，完美！

注意点

1..label和它的after伪类要部分相同的css属性，来保证after元素是.label的第二行

{
    display:inline-block;
    text-align: justify;
    overflow: hidden;
    width: 4em;
    height: 40px;
}

2.:冒号推荐写在.msg元素的before伪类上，写在label里面或外面都不能满足需求，具体效果可以自己试试看

<label>{{label}}：</label>
或
<label>{{label}}</label>：

3.最后，将.label元素用绝对定位固定住，顺便实现右侧多行的效果。