应使用 配合 text-decoration: underline 实现多音字下划线标注，避免 标签；需结合 结构隔离汉字与拼音，用 text-underline-offset 和 text-decoration-thickness 精调样式，确保可访问性与兼容性。
标签在现代 HTML 中已废弃，直接用它加下划线不仅语义错误，还会被 Lighthouse 等工具标为可访问性问题。真正该用的是 CSS 的 text-decoration。
用 text-decoration: underline 实现下划线标注
多音字标注场景（比如“没马蹄”的“没”）需要视觉强调又不破坏语义， + CSS 是唯一合规做法：
- 必须包裹在语义中立的
或里，不能用或 - 推荐用类名控制，比如
class="polyphonic"，避免内联样式 - 若需区分“待注音字”和“已标注字”，建议用两个类：
polyphonic-target（下划线）和polyphonic-annotated（带拼音气泡） - 注意：不要对整段加下划线——屏幕阅读器会把连续下划线内容连读，干扰语音输出
text-decoration 的坑：浏览器默认线太粗、位置太低
原生 text-decoration: underline 在 Chrome/Firefox 下默认线偏粗、离文字基线距离大，容易盖住拼音或影响排版。解决方法：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
text-underline-offset抬高下划线，例如text-underline-offset: 0.15em - 用
text-decoration-thickness控制粗细，如text-decoration-thickness: 1px - 这两个属性在 Safari 15.4+ 和 Chrome 95+ 才稳定支持；老版本需回退到
border-bottom模拟 - 若兼容 IE 或旧安卓 WebView，改用
border-bottom: 1px solid currentColor，但要调padding-bottom避免行高撑开
配合拼音标注时，下划线和拼音不能打架
常见错误是给带拼音的文字整体加下划线，结果拼音也被划穿。正确结构是只对汉字部分加修饰：
<ruby><rb><span class="polyphonic">没</span></rb><rt>mò</rt></ruby>
-
放拼音，这是标准用法 - 下划线样式只作用于
，不会影响 - 注意：某些字体下
会重设行高，建议加ruby { line-height: 1.2; } - 如果用伪元素实现拼音（非
），务必确保::after不触发下划线继承
多音字标注本质是「语义标记 + 视觉提示」的组合任务。下划线只是视觉层，一旦脱离 或 ARIA 标注，对视障用户就完全失效。最易被忽略的一点：别为了省事把拼音写成图片或 SVG 文本——那等于把音标变成了不可复制、不可缩放、不可被语音引擎识别的黑盒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
