::before + attr()无法直接给文字加注音，因其伪元素生成独立行内盒且无天然垂直对齐锚点；ruby才是语义正确、可访问、兼容性好的原生方案。
为什么::before + attr() 无法直接给文字加注音
因为::before伪元素插入的位置在元素**内容之前**，不是“上方”；它生成的是独立的行内盒，无法天然对齐到父元素文本的顶部基线。更关键的是：attr(data-yin)只能读取属性值，但无法自动把注音（如「ㄓ」）精准叠在对应汉字正上方——缺少定位锚点和垂直对齐控制。
ruby才是语义正确且开箱即用的方案
HTML 原生ruby标签专为注音设计，浏览器默认样式已处理好字与音的上下关系，无需计算偏移、不依赖 JS、兼容屏幕阅读器。
- 基本结构：
<ruby>汉<rt>ㄏㄢˋ</rt></ruby>
- 多字多音：
<ruby>苹<rt>ㄆㄧㄥˊ</rt>果<rt>ㄍㄨㄛˇ</rt></ruby>
- 若需微调间距或字体大小，用
ruby、rt选择器定制即可，例如：rt { font-size: 0.6em; line-height: 1; }
硬要用::before + attr()？得手动模拟ruby行为
必须包裹每个字并设为position: relative，再让::before绝对定位到顶部居中——attr()只负责传值，布局逻辑全靠 CSS 补足。
- HTML 示例：
<span class="ruby-char" data-yin="ㄓ">知</span>
- CSS 关键部分：
.ruby-char { position: relative; display: inline-block; }<br>.ruby-char::before {<br> content: attr(data-yin);<br> position: absolute;<br> top: -0.8em;<br> left: 50%;<br> transform: translateX(-50%);<br> font-size: 0.7em;<br> line-height: 1;<br>} - 注意：
top: -0.8em不是通用值，取决于当前字体的line-height和font-size，中文字体差异大，需逐字体调试 - 行高变化、换行、字号缩放时容易错位，响应式场景下维护成本高
移动端和可访问性上的隐性代价
用伪元素实现的“注音”在 VoiceOver、TalkBack 等读屏软件中默认**不会朗读attr()内容**，也无法被搜索引擎识别为有效注音信息；而ruby + rt是 W3C 明确支持的可访问标注方式。
如果你的项目需要支持残障用户、教育类内容或 SEO 友好，跳过花式 hack，直接用ruby——它不是“老古董”，Chrome 120+、Safari 17+、Firefox 都已稳定支持，连ruby-position等新属性也在推进中。
真正难的不是让字看起来像有注音，而是让注音在各种设备、各种辅助技术、各种缩放比例下都可靠存在。这点上，ruby已经替你扛住了大部分边界情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
