HTML&CSS：text-decoration:overline与<sub>标签冲突致平方根线条异常

可以仅用原生HTML和CSS实现完整的平方根效果，核心思路是用CSS伪元素替代text-decoration:overline——因为text-decoration的线条会继承给子元素（比如<sub>），导致线条随下标元素下移、断裂，而伪元素可以创建独立于子元素的完整线条。

具体实现方案 #

1. 基础结构与样式

调整HTML结构，用容器包裹根号内的内容，再通过CSS伪元素绘制上划线：

v<sub>1</sub> = &radic;<span class="sqrt-container">2g(y<sub>2</sub> - y<sub>1</sub>)</span>

.sqrt-container {
  position: relative;
  display: inline-block; /* 让容器能承载绝对定位的伪元素 */
  padding-top: 0.4em; /* 给上划线预留空间 */
  margin-left: 0.1em; /* 与根号符号拉开一点间距，优化视觉对齐 */
}

.sqrt-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: currentColor; /* 继承文本颜色，保持样式统一 */
}

2. 优化根号符号对齐（可选）

如果觉得根号符号和上划线的垂直位置不够协调，可添加微调样式：

v<sub>1</sub> = <span class="radic">&radic;</span><span class="sqrt-container">2g(y<sub>2</sub> - y<sub>1</sub>)</span>

.radic {
  vertical-align: top;
  font-size: 1.2em; /* 放大根号，让视觉比例更自然 */
}

原理说明 #

• inline-block让容器形成独立布局上下文，确保伪元素线条宽度完全包裹内容；
• 绝对定位的伪元素线条不受内部<sub>标签样式影响，始终保持连续且位置统一；
• currentColor保证线条颜色与文本一致，无需单独指定颜色值。

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