使用伪类设置文字对齐
经常前端网页会有需求设置文字对齐, 例如:
姓名
联系方式
蠢一点的做法是加空格
姓 名
联系方式
但是不同字体所对的空格是不同的, 这和设计师所设计字体时的规定有关系.
伪类::after
span{
width: 5em;
display: inline-block;
line-height: 20px;
height: 20px;
text-align: justify;
overflow: hidden;
}
span::after{
content: '';
display: inline-block;
widht: 100%;
}
<div>
<span>姓名</span><br>
<span>联系方式</span>
</div>
