CSS伪元素：使用attr来引用另一个元素的属性

Question

我想使用 ::before 伪元素插入一些在 HTML 文件的另一个区域中找到的文本。

我的HTML：

<html>
    <body notetext="Note">
     ...
    <p class="bodytext">Don't press the red button!</p>
    </body>

我可以使用 content:attr 来 select 当前元素的一个属性，但是是否可以引用祖先元素的一个属性？就像在 XPath 中一样，例如 (//body/@notetext)

非工作CSS我有：

p.bodytext::before {
    content:attr(notetext);
}

我正在为 CSS 分页媒体使用 Antennahouse Formatter。

Answer 1

如果您可以更改 HTML，您可以考虑使用 CSS 变量，如下所示：

p.bodytext::before {
  content: var(--text);
}

<body style="--text:'Note '">

  <p class="bodytext">Don't press the red button!</p>
</body>

Answer 2

只有css是不可能引用其他元素内容的。也不可能引用父元素。我建议您使用 javascript 和数据属性来解决您的问题。

Temani Afif 的回答很好，只要您不需要支持 Internet Explorer，我就会推荐它。否则你需要一个 css 自定义属性 IE polyfill。

Answer 3

AH Formatter 有一个 -ah-attr-from() 扩展函数（参见 https://www.antennahouse.com/product/ahf65/ahf-ext.html#attr-from）。

函数原型与 attr() 相同，但添加了指定祖先元素的参数：

-ah-attr-from( <from-name> , <attr-name> <type-or-unit>? [ , <fallback> ]? )

CSS pseudo-elements: using attr to refer to an attribute of another element