CSS如何使底部边框适合具有字母间距的链接

Question

我有一个文字有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中，我们可以删除右侧的3px，并使用否定margin：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;