CSS如何将底部边框与字母间距[duplicate]的链接相匹配

Question

这个问题在这里已有答案：

• CSS Text underlining too long when letter-spacing is applied? 7个答案

我有一个链接，文本有一些letter-spacing。现在，由于这个原因，底部边界比链接更远。如何避免这种情况，例如如何使底部边框适合链接文本？

<a href="#">LINK</a>

CSS：

a { 
   letter-spacing: 3px;
   font-size: 30px;
   border-bottom: 2px solid orange;
   text-decoration: none
 }

FIDDLE

Answer 1

克服这个问题的唯一方法就是破解你的方法：通过将文本包装在span中，我们可以使用负margin删除右侧的3px：

a {
  font-size: 30px;
  border-bottom: 4px solid green;
  letter-spacing: 3px;
  text-decoration: none;
}

span {
  display: inline-block;
  margin-right: -3px;
}

<a href="#"><span>LINK</span></a>