如何在CSS中引用其他元素的属性值作为伪元素的content属性内容

核心限制先明确 #

原生CSS的attr()函数目前仅支持读取当前被选中元素自身的属性，且仅可在伪元素的content属性中使用，无法直接获取其他元素（比如你示例中的<X>标签）的属性值，你写的content:attr(1)也是无效写法：attr()的参数需要是属性名，而非属性值。

可行实现方案 #

方案1：JavaScript实现（通用无额外结构要求）

先通过JS把<X>的attr属性值同步到<Y>的自定义属性上：

const xEl = document.querySelector('X');
const yEl = document.querySelector('Y');
yEl.setAttribute('x-attr', xEl.getAttribute('attr'));

之后CSS直接读取<Y>上的自定义属性即可：

Y::before {
  content: attr(x-attr);
}

方案2：纯CSS实现（需要手动调整XML结构）

如果你不想用JS，可以直接把<X>的attr属性值手动复制到<Y>的自定义属性上，调整后的XML如下：

<X attr="1"> something</X>
<Y x-attr="1"> something else </Y>

CSS写法和上述方案一致即可。

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