纯CSS可通过伪类（:hover/:focus/:checked/:disabled）判断元素状态，结合伪元素（::before/::after）注入动态内容，利用data属性存储文案并用attr()读取，实现无需修改HTML的状态化标签展示。
不同状态下的标签展示不同内容，核心是用伪类控制状态切换，再用伪元素（::before / ::after）注入动态内容——不需要改 HTML 结构，纯 CSS 就能实现。
用 :hover、:focus、:checked 等伪类触发状态变化
伪类代表元素的某种交互或功能状态。比如按钮悬停时显示提示文字，复选框选中后在旁显示“已启用”，都靠它判断“现在是什么状态”。
-
:hover适合鼠标悬停提示（如图标旁浮出文字） -
:focus适合表单获得焦点时强调或补充说明 -
:checked配合或radio，实现选中/未选中内容切换 -
:disabled可用于灰显+替换提示语，比如“暂不可用”
用 ::before / ::after 插入状态对应的文字或图标
伪元素不改变 DOM，但能在元素前后“无中生有”地加内容。配合伪类使用，就能按状态显示不同文案。
- 必须设置
content属性（哪怕只是content: ""），否则不渲染 - 推荐用
data-*属性存多态文案，CSS 中用attr(data-tip-hover)动态读取，便于维护 - 示例：给开关按钮加状态提示
.switch:checked::after { content: "开"; }
隐藏默认文本，让伪元素成为唯一内容源
如果希望“只显示伪元素内容”，常见做法是把原生文字视觉隐藏，避免冗余。
立即学习“前端免费学习笔记（深入）”；
- 用
text-indent: -9999px或font-size: 0隐藏内联文本（注意可访问性，建议搭配aria-label） - 对
button或label，更稳妥的方式是留空 HTML 文本，完全由伪元素承载内容 - 若需支持屏幕阅读器，可用
visually-hidden类 +aria-live同步状态变化
进阶：用 attr() + data 属性实现多语言/多状态文案
避免在 CSS 里硬编码多套文案，把内容交给 HTML 管理更灵活。
- HTML：
- CSS：
.status-btn::after { content: attr(data-off); }
.status-btn[data-state="on"]::after { content: attr(data-on); } - JS 切换
data-state值，CSS 自动响应，解耦逻辑与表现
基本上就这些。关键是把“状态判断”交给伪类，“内容呈现”交给伪元素，再用 data 属性或 JS 协同管理文案源——结构干净，维护方便，也不影响语义和可访问性。
