使用document.getElementById修改带CSS ::before元素内容的方法

::before属于CSS生成的伪元素，不会出现在DOM树结构中，因此无法直接通过JavaScript获取、修改它本身的节点内容，但完全可以先通过document.getElementById('ELEMENT_ID')拿到对应的宿主元素，再通过间接方案控制它的显示，所有实现逻辑都符合你要求的调用方式。

这种情况直接操作即可，伪元素内容不会被干扰：

• 拿到元素后直接修改textContent或innerHTML即可，示例：

const targetEl = document.getElementById('ELEMENT_ID');
// 更新元素本身的文本内容
targetEl.textContent = '需要展示的元素主体内容';

• ::before是浏览器渲染时额外附加在元素内容前方的生成内容，和DOM树里的元素实体内容相互独立，不会被上述操作覆盖。

伪元素本身没有DOM节点，无法直接被JS选中，三种常用的可行实现，都基于已经获取到的宿主元素操作：

方案1：CSS变量联动（最灵活，支持任意动态文本） #

提前在CSS中将::before的content绑定到自定义CSS变量：

#ELEMENT_ID::before {
  /* 第二个参数是变量未设置时的默认显示内容 */
  content: var(--before-content, '默认伪元素内容');
}

JS拿到元素后，直接设置元素上的CSS变量值即可完成修改：

const targetEl = document.getElementById('ELEMENT_ID');
// 传入需要设置的伪元素文本
targetEl.style.setProperty('--before-content', '修改后的伪元素显示内容');

方案2：自定义属性联动（适合短文本的简单场景） #

可以利用CSS的attr()函数直接读取元素的自定义属性作为伪元素内容：

#ELEMENT_ID::before {
  /* 读取元素上的data-before-text属性值 */
  content: attr(data-before-text);
}

JS拿到元素后直接修改自定义属性即可：

const targetEl = document.getElementById('ELEMENT_ID');
targetEl.dataset.beforeText = '更新后的伪元素短文本';

方案3：类名切换（适合固定几种状态的场景） #

提前写好不同状态对应的::before内容规则，通过类名触发不同显示：

#ELEMENT_ID::before {
  content: '默认状态提示';
}
/* 成功状态对应的伪元素内容 */
#ELEMENT_ID.state--success::before {
  content: '操作已完成';
}
/* 警告状态对应的伪元素内容 */
#ELEMENT_ID.state--warn::before {
  content: '请确认操作风险';
}

JS拿到元素后直接切换类即可适配对应内容：

const targetEl = document.getElementById('ELEMENT_ID');
// 切换到成功状态的伪元素显示
targetEl.classList.add('state--success');

• 不存在直接选中::before伪元素的DOM API，所有对伪元素的控制都是通过操作其宿主元素实现，全程不需要替换元素选择逻辑，始终可以用document.getElementById('ELEMENT_ID')作为操作入口。
• 如果修改元素内容时出现伪元素显示异常，通常是旧代码中对::before设置了依赖元素内部结构的样式（比如绝对定位需要参考元素尺寸），调整元素内容时会连带影响伪元素的布局，不属于内容修改的逻辑问题。

内容的提问来源于stack exchange，提问作者Your local code dealer