css 设置字间距以后多了一部分

Question

设置了字间距以后下面的划线右边多出来了一部分，怎么让下面的横线和上面的字体一样宽，字间距应该类似于margin-right 但是这样很难看，求怎么解决

Answer 1

用background-image。
而且这种问题，多半是你写的有问题。

Answer 2

浏览器会把letter-spacing加到文字的后面,导致多出来一个宽度，可以用负margin消除这个宽度

<span">首页</span>

span {
    letter-spacing: 5px;
}
span:after {
    content:'';
    margin-left: -5px;
}

---

后来发现这种方式如果代码在格式话过程中有换行就不行了

<div class="desc">
   <span>标题</span>
</div>

所以换了一种方式，（）兼容性未测试）

&:before {
    content: '';
    display: inline-block;
}

Answer 3

这种最好不要设置字间距，除非你导航的宽度已经定死，下划线用的:after来做的，产生这种情况的原因是letter-spacing是让每个字都有间距的，你首页的页字后面也有间距，当然也有解决办法，但是这样写的话会产生冗余的css来处理样式上的问题，得不偿失，建议用 和空格来控制间距

Answer 4

伪类来操作肯定没问题。

不过，还是要看你的这个导航的dom是怎么写的，如果单独就给一个span，伪类是比较好的解决方式，不同的dom也有不同的实现方式

       span{
            border-bottom: solid red 1px;
            letter-spacing: 10px;
        }
        span::after{
            content:'';
            margin-right:-10px;
        }

<span>首页</span>

Answer 5

在左边也加一个相应的宽度如何？

  letter-spacing: 15px;
   /*text-indent: 15px;*/
  padding-left: 15px;