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

Question

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

Antenna House Formatter 具有

-ah-attr-from()

函数原型与

attr()

相同，但添加了指定祖先元素的参数：

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

_{注意 - 我是 Antenna House 的员工。}