是替换元素，不支持::before/::after伪元素，因其内部结构由浏览器控制且内容模型为空，伪元素根本不会被创建。
<meter></meter> 本身不支持悬停文字提示，title 属性不会自动显示，也不能靠伪类（如 :hover）直接给它加 tooltip。想实现“不同区间自动改变文字提示”，必须绕开原生行为，用 CSS + data- 属性模拟。
为什么不能直接对 <meter></meter> 用 ::before/::after 加提示
浏览器把 <meter></meter> 当作替换元素（replaced element），类似 <input> 或 <video></video>，它的内部结构由 UA 控制，不开放子树访问。你写 meter::after 在绝大多数浏览器中根本不会渲染 —— 不是样式没生效，是伪元素压根不被创建。
常见错误现象：
– 写了 meter:hover::after { content: "高负载" }，但鼠标悬停后什么也不出现
– 尝试用 meter > span 包裹提示文字，结果被浏览器忽略或破坏语义
-
<meter></meter>的内容模型是空的（void content），不允许嵌套任何子节点 - 所有视觉定制只能通过浏览器私有伪元素（如
meter::-webkit-meter-bar）干预内部条形，无法插入文本节点 - 没有标准 API 暴露当前 value 所在区间，low/high/optimum 的语义判定完全由渲染引擎黑盒处理
用父容器包裹 + data- 属性按区间动态切换提示文字
核心思路：放弃改造 <meter></meter> 本身，把它当纯视觉组件；用外层 <div> 承载状态逻辑和提示文案，靠 JS 或纯 CSS 切换 <code>data-tooltip 值。
使用场景：
– 服务器负载率（0–100%，low="30" high="70" optimum="40"）
– 电池电量（0–100%，low="15" high="85"）
– 用户评分（1–5 分，low="2" high="4" optimum="5"）
- 先明确划分区间逻辑（例如 value ≤ 30 → “偏低”，30 70 → “偏高”），这个判断不能交给浏览器，得自己写
- 把
<meter></meter>和提示文案放在同一父容器里，比如<div class="meter-group"> <li>用 JS 监听 value 变化（或服务端渲染时静态写死），根据数值更新 <code>data-tooltip值 - 用 CSS 伪元素读取该属性并显示，配合
:hover触发
最小可行示例：
<div class="meter-group" data-tooltip="正常">
<meter value="68" min="0" max="100" low="30" high="70"></meter>
</div>
<style>
.meter-group {
position: relative;
display: inline-block;
}
.meter-group::after {
content: attr(data-tooltip);
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 3px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: .2s;
}
.meter-group:hover::after {
opacity: 1;
visibility: visible;
}
</style>
纯 CSS 方案只适用于固定值，且区间数受限
如果 value 是静态的（比如服务端渲染后不再变），可以用属性选择器 + data-state 模拟区间，避免 JS。但最多可靠支持 3–4 个离散状态，无法覆盖连续数值范围。
参数差异：
– data-state="low" 对应 value ≤ low
– data-state="mid" 对应 low – data-state="high" 对应 value > high
- 必须手动为每个
<meter></meter>设置正确的data-state，服务端或构建时生成 - CSS 中要为每种 state 写独立规则：
.meter-group[data-state="low"]::after { content: "偏低"; } - 不设
data-state或值拼错，提示就会为空 —— 没 fallback 机制 - 无法响应 value 动态变化，适合仪表盘只读视图，不适合实时监控面板
容易被忽略的关键点
low/high/optimum 的数值关系不是“建议值”，而是硬性约束：必须满足 min ，否则整个三段式语义失效，<code><meter></meter> 退化为无色条 —— 这时你写的 data-state="low" 就完全失去依据。
更隐蔽的问题：
– Safari 完全忽略 low/high/optimum，连伪类都不触发，所以纯靠这些属性做状态判断，在 Safari 里永远是 “mid”
– Chrome 对 value === low 的判定有时是 “low”，有时是 “mid”，取决于内部浮点精度处理，别依赖精确相等
– 所有提示文案必须提前预置，无法在伪元素里做计算或条件拼接（content 不支持 calc() 或字符串操作）
