Может ли псевдоэлемент получить что-либо из родителя через свойство content

«Может ли псевдоэлемент получить что-либо из родителя через свойство content» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Да, псевдоэлемент может получить текст из родителя через свойство content с помощью атрибутов data-*. Например:

<div class="parent" data-text="Пример текста"></div>
.parent::before {
  content: attr(data-text);
  color: red;
}

Псевдоэлемент ::before выведет текст "Пример текста" красным цветом. Однако, напрямую получить текст или HTML из родителя нельзя — только через атрибуты. Также content поддерживает комбинации строк и атрибутов:

.parent::after {
  content: "Атрибут: " attr(data-text);
}