的文本内容
" />
本文介绍一种纯 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 变量可轻松实现运行时文本切换：
保君发企业网站系统1.0
下载
保君发免费网站系统使用说明：一、 本程序完全免费，并且，保证功能全部可以使用，且无后门及木马等，请放心使用。二、 如果发现问题，请及时联系我们，我们会义务尽力解决所反映的问题。或到本公司网站下载更新程序。三、 修改三个文件就能成为自己的网站：1、顶部图片LOGO.GIF，2、替换透明动画：LOGO.SWF，3、修改#sys123.asp中的内容为你想要的内容。
/* 默认 */
: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 前提下优雅、声明式地实现标签文本的动态替换，适用于主题定制、国际化文案预设等静态场景。
立即学习“前端免费学习笔记（深入）”；
