如何使用 CSS 变量动态替换 label 标签的文本内容-js教程

本文介绍一种通过 css `::before` 伪元素结合 css 自定义变量（css custom properties）来动态替换 `` 原有文本的方法，并解决原始文本残留问题。核心技巧是将标签字体大小设为 0，再在伪元素中重置字体并注入变量值。

在纯 CSS 环境下，无法直接修改 HTML 元素的文本节点内容（如 arun 中的 “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; /* 确保正常排版（尤其当需换行或设置宽高时）*/
}

<label class="custom-label">arun</label>

⚠️ 注意事项：