应使用 text-decoration: underline 而非 标签，因后者语义为拼写错误或专有名词标注，影响可访问性与seo；css下划线更准确、可控且兼容性好。
用 text-decoration: underline，别用 <u></u> 标签。 它不是“过时就不用”，而是语义错位——浏览器渲染出来像下划线，但对屏幕阅读器、SEO、可访问性工具来说，它代表“拼写错误”或“专有名词标注”，不是视觉装饰。
为什么 <u></u> 不该用来加下划线
HTML5 重新定义了 <u></u>，但它只适用于特定语义场景：比如中文古籍里的人名专名号、日文振假名、英文拼写纠错提示。W3C 明确说不能替代 CSS 下划线。
- 用户看到带下划线的普通文本，会下意识当成链接（尤其移动端没 hover 提示）
- 屏幕阅读器可能跳过
<u></u>内容，或读作“拼写错误”，破坏信息传达 - 旧项目里残留的
<u></u>，多数是历史惯性，不是规范做法
text-decoration: underline 的基本写法和常见翻车点
最稳妥的是直接写 text-decoration: underline，IE6+ 全兼容，行为稳定。
- 它不继承：父元素设了
text-decoration: none，子元素不会自动恢复，得显式加回来 - 块级元素（如
<div>）里文字换行，下划线会在每行末尾断开——这是规范行为，不是 bug <li>如果用了 <code>text-decoration: underline solid red但颜色没生效，可能是被后续text-decoration-color规则覆盖了 - a 标签点击后变成紫色还带下划线？那是
:visited状态没重置，要单独写a:visited { text-decoration-color: ... } -
text-decoration-line: underline—— 必须显式声明，否则text-decoration-thickness不生效 -
text-underline-offset: 4px—— 控制下划线离文字底边的距离（Chrome 87+ / Firefox 84+ 支持） -
text-decoration-thickness: 2px—— 设粗细（auto或from-font兼容性差） -
text-decoration-color: #007bff—— 颜色可单独设，不影响其他属性
想调下划线位置、粗细、颜色？拆开写独立属性
简写 text-decoration 容易掩盖细节。真要控制，必须用 Level 3 的独立属性：
示例：
a { text-decoration-line: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
局部下划线怎么做？用 <span></span> 包裹目标文字
想只给一句话里的几个字加下划线，别给整个 <p></p> 或 <div> 设样式——那样会连括号、数字一起划线。
<ul>
<li>把需要下划线的部分用 <code><span class="underline"></span> 包起来
.underline { text-decoration: underline; }
<u></u> 替代，语义污染 + 可访问性风险双倍叠加<span></span> 插入位置准确，别把空格或标点包进去真正难的不是“怎么画一条线”，而是让这条线出现在该出现的地方、只影响该影响的内容、不干扰任何人——包括看不见它的人。
