Question

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

我的HTML：

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

我可以使用content：attr来选择当前元素的属性，但是可以引用祖先元素的属性吗？就像在XPath中一样，例如（// body / @ notetext）

我所拥有的非工作CSS：

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

我正在使用Antennahouse Formatter，用于CSS Paged Media。

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

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

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