如何控制内联元素空格归属？兼容HTML格式化的CSS方案

直接用这个CSS属性就能搞定：

a {
  text-decoration-skip: spaces;
}

原理说明 #

这个属性会让浏览器绘制链接下划线时自动跳过空格字符——不管你的代码格式化工具在<a>标签末尾加了多少换行或空格，下划线都不会延伸到这些空白区域，完全不需要手动修改HTML结构来破坏代码格式化的一致性。

兼容性降级（可选） #

如果需要兼容不支持text-decoration-skip的旧版浏览器（比如IE），可以用伪元素模拟下划线来避开末尾空格：

a {
  text-decoration: none;
  position: relative;
}

a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  /* 减去一个空格的宽度，可根据字体微调数值 */
  width: calc(100% - 0.25em);
  height: 1px;
  background-color: currentColor;
}

把这段CSS加到你的样式表里，不管代码格式化工具怎么排版HTML，链接的下划线都只会覆盖实际文本内容，不会延伸到后面的空格上，完美匹配你想要的视觉效果。

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