html5 中 标签语义已变为“非文本标注”，不再推荐用于纯视觉下划线；应优先使用 css（如 border-bottom）实现，兼顾可访问性、seo 与跨端兼容性。
HTML 里 <u></u> 标签还能用吗？
能用，但不推荐直接用 <u></u>——它在 HTML5 中语义已变，不再是“下划线”而是“非文本标注”，比如拼写错误、专有名词、中文专名号等。浏览器默认仍渲染为下划线，但语义错位会导致可访问性（如屏幕阅读器）和 SEO 风险。
常见错误现象：<u>用户名</u> 看似正常，实际被读屏软件识别为“拼写可疑内容”；Chrome 120+ 已开始对无语义 <u></u> 发出控制台警告。
- 只在需要表达「文字本身有特殊标注含义」时才用
<u></u>（例如：鲁迅 表示人名专称） - 纯视觉下划线需求，一律改用 CSS
- 若必须兼容极老系统（IE8 及以下），
<u></u>是唯一选择，但这类场景现在几乎不存在
CSS 实现下划线的三种可靠方式
最常用的是 text-decoration: underline，但它有坑：默认会穿过字母 descender（如 g、y、p 的下延部分），影响可读性；且无法单独控制颜色、粗细、间距。
-
text-decoration: underline：适合快速原型或内联简单标注，注意加text-underline-offset避免压字（如text-underline-offset: 3px） -
border-bottom：更可控，支持颜色、粗细、圆角，但需注意行高（line-height过小会导致贴底难看） -
background-image: linear-gradient()：精准控制位置/长度/虚线，适合设计驱动项目，但代码稍长
示例（推荐 border-bottom 方案）：
<p class="link">点击这里</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1706" title="一帧秒创"><img
src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d37de74c4152.png" alt="一帧秒创" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1706" title="一帧秒创">一帧秒创</a>
<p>基于秒创AIGC引擎的AI内容生成平台，图文转视频，无需剪辑，一键成片，零门槛创作视频。</p>
</div>
<a href="/ai/1706" title="一帧秒创" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<style>
.link {
border-bottom: 1px solid #007bff;
display: inline-block; /* 防止撑满父容器 */
}
</style>
React/Vue 里动态加下划线要注意什么？
框架中容易忽略样式继承和作用域隔离问题。比如 Vue 单文件组件用 <style scoped></style>，border-bottom 可能被覆盖；React 使用 CSS-in-JS 时，伪类 ::after 定位容易失效。
- 避免在
scoped样式里直接写text-decoration，优先用 class 控制，防止深度选择器失效 - 需要 hover 下划线变化时，别只写
a:hover { text-decoration: none }—— 这会清掉所有修饰，应明确重置border-bottom或background-image - 服务端渲染（SSR）项目中，CSS 未加载完成前，
<u></u>会先显示原生下划线，造成闪烁，统一用 CSS 更稳
移动端下划线的特殊表现
iOS Safari 对 text-underline-offset 支持滞后（iOS 15.4 才完全支持），Android Chrome 则基本没问题。另外，iOS 默认会给 <a></a> 加阴影下划线，和自定义下划线叠加后显得过重。
- 用
text-decoration-skip-ink: auto（默认值）可跳过 descender，但 iOS 旧版不支持，需配合text-underline-offset降级处理 - 真机调试必测：长按链接触发复制菜单时，下划线是否遮挡文字（尤其小字号 + 粗边框）
- 微信内置浏览器（X5 内核）对
background-image下划线渲染有偏移，建议 fallback 到border-bottom
事情说清了就结束。真正麻烦的不是怎么加那根线，而是加在哪、为什么加、以及加完之后别人怎么看它——尤其是看不见的人。
