伪类设置文字对齐

使用伪类设置文字对齐

经常前端网页会有需求设置文字对齐, 例如:

姓名

联系方式

蠢一点的做法是加空格

姓   名
联系方式

但是不同字体所对的空格是不同的, 这和设计师所设计字体时的规定有关系.

伪类::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%;
}

    姓名

    联系方式