的文本内容 ” />
本文介绍一种纯 css 方案：通过 `font-size: 0` 隐藏原生标签文本，并利用 `::before` 伪元素结合 css 自定义变量（`var(–custom-text)`）注入新文本，实现无需 javascript 的动态文本替换。
在标准 html/CSS 中，CSS 无法直接修改元素的 dom 文本内容（如 中的 “arun”），因为 content 属性仅对 ::before 和 ::after 伪元素生效，且不会覆盖原有文本——它只是“追加”内容。若想真正“替换”而非“叠加”，需让原始文本不可见，再由伪元素提供唯一可见文本。
✅ 正确实现方式：隐藏原文 + 伪元素注入
核心思路是：
- 将
- 在 ::before 中重置字体大小（推荐使用 rem 以保持可缩放性），并通过 content: var(–custom-text) 插入变量值。
:root { --custom-text: "New Text"; /* 支持任意字符串，含空格、标点 */ } .custom-label { font-size: 0; /* 关键：隐藏原始文本 */ line-height: 1; /* 可选：避免因 font-size:0 导致行高异常 */ } .custom-label::before { content: var(--custom-text); font-size: 1rem; /* 必须显式设置，否则继承父级 0 */ display: inline-block; /* 确保正确内联渲染（尤其当需换行或对齐时） */ }⚠️ 注意事项与限制
- 无障碍考量：该方法会令原始文本对屏幕阅读器仍可见（除非额外添加 aria-hidden=”true” 或 aria-label 覆盖）。如需兼顾可访问性，建议配合 ARIA 属性：
- 不支持动态 HTML 或富文本：content 仅接受字符串、计数器或引用属性值，不能插入 HTML 标签或执行 js。
- 字体单位选择：避免使用 em（会继承 font-size: 0 导致失效），优先用 rem 或绝对单位（如 16px）。
- 浏览器兼容性：CSS 自定义属性（–var）和 content: var() 在现代浏览器中广泛支持（chrome 49+、firefox 31+、safari 9.1+），IE 完全不支持。
✅ 进阶技巧：多语言/主题化切换
利用 CSS 变量可轻松实现运行时文本切换：
/* 默认 */ :root { --label-text: "Submit"; } /* 暗色模式下 */ @media (prefers-color-scheme: dark) { :root { --label-text: "Send"; } } /* 或通过 JS 切换 */ document.documentElement.style.setProperty('--label-text', 'Confirm');综上，虽然 CSS 本身不具备 DOM 操作能力，但借助 font-size: 0 + ::before + CSS 变量这一组合方案，可在零 JS 前提下优雅、声明式地实现标签文本的动态替换，适用于主题定制、国际化文案预设等静态场景。
立即学习“前端免费学习笔记（深入）”；