能否使用CSS变量替换label标签的原有文本内容？

用户提供的代码如下：

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

<style>
:root {--custom-text: "New Text"; /* Replace with your desired text */}

.custom-label::before {content: var(--custom-text);}

</style>

用户问题：我已尝试使用:before和:after伪元素，但希望通过CSS变量更改label中的内容'arun'，请问这是否可行？

不行，CSS没有能力直接修改或替换HTML元素的原始文本内容，它只能控制元素样式，包括通过伪元素添加额外内容。

如果只是要实现视觉上替换内容的效果，可以通过隐藏原始内容，再用伪元素显示CSS变量的内容来实现，修改后的代码示例：

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

<style>
:root {--custom-text: "New Text";}

.custom-label {
  /* 隐藏原始文本 */
  color: transparent;
  position: relative;
}

.custom-label::before {
  content: var(--custom-text);
  /* 将伪元素定位到原始文本的位置 */
  position: absolute;
  left: 0;
  color: initial;
}
</style>

如果需要真正修改DOM中的文本内容（不是仅视觉隐藏），则必须借助JavaScript，比如读取CSS变量的值后，直接更新元素的文本内容：

// 获取CSS变量的值
const root = document.documentElement;
const customText = getComputedStyle(root).getPropertyValue('--custom-text').trim();
// 更新label的文本内容
document.querySelector('.custom-label').textContent = customText.replace(/"/g, '');

内容的提问来源于stack exchange，提问作者Arun