的文本内容
" />
本文介绍一种纯 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; /* 确保正确内联渲染（尤其当需换行或对齐时） */
}<label class="custom-label">arun</label> <!-- 页面将只显示 "New Text"，无残留 "arun" -->
⚠️ 注意事项与限制
-
无障碍考量：该方法会令原始文本对屏幕阅读器仍可见（除非额外添加 aria-hidden="true" 或 aria-label 覆盖）。如需兼顾可访问性，建议配合 ARIA 属性：
<label class="custom-label" aria-label="New Text">arun</label>
- 不支持动态 HTML 或富文本：content 仅接受字符串、计数器或引用属性值，不能插入 HTML 标签或执行 JS。
- 字体单位选择：避免使用 em（会继承 font-size: 0 导致失效），优先用 rem 或绝对单位（如 16px）。
- 浏览器兼容性：CSS 自定义属性（--var）和 content: var() 在现代浏览器中广泛支持（Chrome 49+、Firefox 31+、Safari 9.1+），IE 完全不支持。
✅ 进阶技巧：多语言/主题化切换
利用 CSS 变量可轻松实现运行时文本切换：
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
/* 默认 */
: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 前提下优雅、声明式地实现标签文本的动态替换，适用于主题定制、国际化文案预设等静态场景。
立即学习“前端免费学习笔记（深入）”；
