CSS псевдоэлементы: использование attr для ссылки на атрибут другого элемента

Я хотел бы использовать псевдоэлемент:: before для вставки текста, который находится в другой области 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.

Источник

3 ответа

Решение

AH Formatter имеет -ah-attr-from() функция расширения (см. https://www.antennahouse.com/product/ahf65/ahf-ext.html).

Прототип функции как для attr() но с добавлением параметра, указывающего элемент предка:

-ah-attr-from( <from-name> , <attr-name> <type-or-unit>? [ , <fallback> ]? )
Источник

Если вы можете изменить HTML, вы можете рассмотреть возможность использования переменных CSS, например:

p.bodytext::before {
  content: var(--text);
}
<body style="--text:'Note '">

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

Источник

Только с помощью CSS невозможно ссылаться на содержимое других элементов. Также невозможно сослаться на родительский элемент. Я бы посоветовал вам использовать javascript и атрибуты данных для решения вашей проблемы.

Ответ Темани Афифа отличный, я бы порекомендовал его, если вам не нужна поддержка Internet Explorer. В противном случае вам понадобится css пользовательские свойства IE polyfill.

Источник
Другие вопросы по тегам