本文介绍一种通过 css `::before` 伪元素结合 css 自定义变量（css custom properties）来动态替换 `
在纯 CSS 环境下，无法直接修改 HTML 元素的文本节点内容（如 中的 "arun"），因为 CSS 不具备 DOM 操作能力。但可通过视觉覆盖的方式实现“替换”效果：隐藏原生文本，再用 ::before 或 ::after 伪元素注入由 CSS 变量控制的新内容。
✅ 正确实现方式如下：
:root {
--custom-text: "New Text"; /* 支持任意字符串，含空格或符号需加英文双引号 */
}
.custom-label {
font-size: 0; /* 关键：隐藏原始文本（文本节点高度归零）*/
line-height: 1;
padding: 0;
margin: 0;
}
.custom-label::before {
content: var(--custom-text); /* 注入变量值 */
font-size: 1rem; /* 必须显式重置字体大小，否则继承 0 */
display: inline-block; /* 确保正常排版（尤其当需换行或设置宽高时）*/
}⚠️ 注意事项：
- font-size: 0 是隐藏原生文本最可靠、无副作用的方法（相比 visibility: hidden 或 text-indent: -9999px，它不破坏语义、不影响可访问性逻辑，且兼容性更好）；
- 伪元素中的 font-size 不可使用 em 单位（因父元素 font-size: 0 会导致 1em = 0px），推荐使用 rem（相对于根字体）、px 或 clamp() 等绝对/响应式单位；
- 若需支持多行文本或复杂样式（如背景、边框、内边距），建议将 ::before 设为 display: block 并设置 width: 100%；
- 此方案不影响表单语义与可访问性（a11y）：屏幕阅读器仍会读取原始 HTML 文本（arun），如需同步更新可访问内容，必须配合 aria-label 或 JavaScript 动态修改 textContent；
- CSS 变量支持动态更新（例如通过 JavaScript 修改 document.documentElement.style.setProperty('--custom-text', '"Hello World"')），伪元素内容将实时响应。
? 扩展提示：若需完全替代文本并兼顾无障碍，推荐组合方案——CSS 覆盖视觉 + aria-label 同步语义：
立即学习“前端免费学习笔记（深入）”；
这样既保证视觉上显示变量值，又确保辅助技术读取最新语义内容。纯 CSS 替换虽巧妙，但在关键交互场景中，仍建议以语义正确性为优先。
