CSS伪元素::before能否通过attr引用祖先元素属性？

很遗憾的告诉你，CSS原生的attr()函数只能获取当前元素自身的属性，没办法像XPath那样直接跨层级引用祖先元素的属性——这也是你之前尝试的代码失效的原因。不过我们可以借助CSS自定义属性（变量）来间接实现这个需求，步骤如下：

具体实现方案 #

1. 首先在祖先元素（这里是<body>）上，把目标属性的值赋值给一个CSS变量：

body {
  /* 将body的notetext属性值存入自定义变量--note-text */
  --note-text: attr(notetext);
}

2. 然后在目标元素的伪元素中，通过var()调用这个变量：

p.bodytext::before {
  /* 调用变量，还可以添加额外的格式文本 */
  content: var(--note-text) ": ";
  /* 可选：给伪元素加样式区分 */
  font-weight: bold;
  color: #666;
}

原理说明 #

CSS自定义属性会沿着DOM树向下继承，所以后代元素（包括伪元素）可以访问祖先元素定义的变量。这种方法不仅能实现你的需求，还能兼容绝大多数现代浏览器（Chrome、Firefox、Edge等均支持）。

如果你的notetext属性值是动态修改的，这个方案也能自动同步更新伪元素的内容，因为CSS变量会实时关联属性值。

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