纯CSS可通过伪类（:hover/:focus/:checked/:disabled）判断元素状态，结合伪元素（::before/::after）注入动态内容，利用data属性存储文案并用attr()读取，实现无需修改HTML的状态化标签展示。
不同状态下的标签展示不同内容，核心是用伪类控制状态切换，再用伪元素（::before / ::after）注入动态内容——不需要改 HTML 结构，纯 CSS 就能实现。
伪类代表元素的某种交互或功能状态。比如按钮悬停时显示提示文字，复选框选中后在旁显示“已启用”，都靠它判断“现在是什么状态”。
:hover 适合鼠标悬停提示（如图标旁浮出文字）:focus 适合表单获得焦点时强调或补充说明:checked 配合 <input type="checkbox"> 或 radio，实现选中/未选中内容切换:disabled 可用于灰显+替换提示语，比如“暂不可用”伪元素不改变 DOM，但能在元素前后“无中生有”地加内容。配合伪类使用，就能按状态显示不同文案。
content 属性（哪怕只是 content: ""），否则不渲染data-* 属性存多态文案，CSS 中用 attr(data-tip-hover) 动态读取，便于维护如果希望“只显示伪元素内容”，常见做法是把原生文字视觉隐藏，避免冗余。
立即学习“前端免费学习笔记（深入）”；
text-indent: -9999px 或 font-size: 0 隐藏内联文本（注意可访问性，建议搭配 aria-label）button 或 label，更稳妥的方式是留空 HTML 文本，完全由伪元素承载内容visually-hidden 类 + aria-live 同步状态变化避免在 CSS 里硬编码多套文案，把内容交给 HTML 管理更灵活。
<button class="status-btn" data-off="停止" data-on="运行中"></button>
.status-btn::after { content: attr(data-off); }<br>.status-btn[data-state="on"]::after { content: attr(data-on); }data-state 值，CSS 自动响应，解耦逻辑与表现基本上就这些。关键是把“状态判断”交给伪类，“内容呈现”交给伪元素，再用 data 属性或 JS 协同管理文案源——结构干净，维护方便，也不影响语义和可访问性。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
671
收藏
