CSS：如何让底部边框适配带字母间距的链接

这个问题我太熟悉了！当给链接设置letter-spacing时，浏览器会在每个字符后面都添加指定的间距——包括最后一个字符，这就导致元素的实际宽度比文本内容宽，底部边框自然就跟着“伸出去”了。给你两个简单好用的解决方案：

方法一：用负margin抵消多余间距（最简洁） #

把链接改成inline-block布局，然后用负的margin-right抵消最后一个字符后的额外间距，这样边框就刚好贴合文本了：

a {
  letter-spacing: 3px;
  font-size: 30px;
  border-bottom: 2px solid orange;
  text-decoration: none;
  display: inline-block;
  margin-right: -3px; /* 值和letter-spacing一致 */
}

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

原理很简单：inline-block让元素的宽度严格包含letter-spacing带来的所有间距，负margin-right则把最后那个多余的间距“收回去”，边框的宽度就和文本实际占的宽度匹配了。

方法二：用伪元素模拟底部边框（无布局改动） #

如果不想改变链接的display属性，用伪元素是更稳妥的选择，完全不影响原有布局：

a {
  letter-spacing: 3px;
  font-size: 30px;
  text-decoration: none;
  position: relative; /* 给伪元素定位做基准 */
}

a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: orange;
  transform: translateX(-3px); /* 向左偏移抵消最后一个间距 */
}

这里伪元素会继承链接的宽度，然后通过transform: translateX向左移动和letter-spacing相同的距离，刚好切掉多余的那部分边框。你也可以用CSS变量来统一管理间距值，方便后续修改：

a {
  --letter-spacing: 3px;
  letter-spacing: var(--letter-spacing);
  /* 其他样式不变 */
}

a::after {
  transform: translateX(calc(-1 * var(--letter-spacing)));
}

两种方法都能完美解决问题，你可以根据自己的布局需求选～

内容的提问来源于stack exchange，提问作者ST80