JavaScript通过属性修改伪元素width时提示属性值无效的问题

我懂你这种头疼的情况——JavaScript确实没法直接碰:before/:after这些伪元素的样式，用CSS属性转译的思路是对的，但卡在width设置提示无效就很闹心，明明数值类型都核对过了对吧？咱们换个更靠谱的方式来搞定：

核心方案：用CSS自定义属性（变量）间接控制伪元素 #

伪元素可以继承父元素的CSS自定义属性，所以我们可以把伪元素的width绑定到父元素的变量上，然后用JS修改父元素的变量，就能间接更新伪元素的样式了。

第一步：修改你的CSS代码，把固定width换成变量

把原来的伪元素width改成用var()引用自定义属性，还可以加个默认值以防变量没被设置：

.rombo .fusion-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0; /* 补全你原来的left属性值 */
  width: var(--pseudo-rombo-width, 100px); /* --pseudo-rombo-width是自定义变量，100px是默认值 */
  /* 保留你原来的其他样式，比如高度、背景色之类的 */
}

第二步：用JavaScript修改父元素的自定义属性

直接选中目标元素（.rombo .fusion-text），通过style.setProperty()设置咱们定义的变量，伪元素的width就会自动同步更新：

// 先拿到目标元素
const textElement = document.querySelector('.rombo .fusion-text');
// 设置你想要的width值，记得带正确的单位（px、%、em都可以）
textElement.style.setProperty('--pseudo-rombo-width', '250px');

排查你可能踩的坑 #

• 有没有漏写单位？
  如果你传的是纯数字（比如250）而不是带单位的250px，CSS会判定为无效值——width属性除了0之外都需要明确单位，这点一定要注意。
• 是不是误操作了伪元素本身？
  别尝试直接获取伪元素（比如document.querySelector('.rombo .fusion-text::before')），伪元素不是真实的DOM节点，JS根本拿不到它，所有操作都要针对父元素来做。
• 变量作用域是不是匹配？
  确保你的.rombo .fusion-text选择器能准确选中目标元素，伪元素只能读取父元素（也就是这个选择器选中的元素）上的自定义属性，要是父元素没选对，变量就传不过去。

这种方式比用data-*属性配合attr()更灵活，因为attr()在非content属性上的支持很有限，而CSS变量可以适配几乎所有CSS属性值类型，后续改其他伪元素样式也能复用这个思路。

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