CSS中括号"()"无法显示下划线的问题及解决咨询

嘿，我懂你遇到的困扰了——默认的链接下划线有时候会在括号这类字符处“断开”，没法覆盖到括号上。别担心，这里有两个简单有效的解决方案：

方案1：调整文本装饰的跳过规则 #

浏览器默认会用text-decoration-skip-ink: auto来让下划线避开某些字符的“墨迹”区域，导致括号这类字符没有下划线。我们只需要把这个属性改成none，就能让下划线覆盖所有文本内容：

a {
  text-decoration: underline;
  text-decoration-skip-ink: none; /* 核心：阻止下划线跳过字符 */
}

对应的HTML保持不变：

<a href='#'>hhh(9)</a>

这个方案最贴近原生下划线的表现，而且代码改动最小。

方案2：用边框模拟下划线 #

如果需要兼容一些旧浏览器（比如IE），或者想要更自定义的下划线样式（比如粗细、颜色），可以用border-bottom来模拟下划线：

a {
  text-decoration: none; /* 关闭原生下划线 */
  border-bottom: 1px solid currentColor; /* 用边框模拟，颜色和文本一致 */
  padding-bottom: 1px; /* 微调下划线和文本的间距 */
}

这个方法的好处是下划线是元素的边框，会完全覆盖文本区域的下方，不会出现字符跳过的问题，还能轻松修改下划线的样式。

你可以根据自己的需求选择其中一种方案，测试后应该就能让括号也显示下划线啦！

内容的提问来源于stack exchange，提问作者Keerthi Reddy Yeruva