Может ли встроенный CSS использовать псевдоэлементы ::before и ::after?

Запрос, разрешает ли встроенный CSS развертывание ::before и ::after псевдоэлементы — правильный вопрос. В этой статье подробно рассматриваются особенности ответа на этот запрос.

Встроенный CSS и псевдоэлементы

Встроенный CSS, расположенный непосредственно внутри HTML-элементов, представляет собой альтернативу CSS, определенному во внешней таблице стилей. Хотя встроенный CSS служит своей цели, при рассмотрении псевдоэлементов возникает ограничение.

Псевдоэлементы :before и :after являются неотъемлемыми функциями CSS, облегчающими вставку контента до или после данного элемента. Однако эти псевдоэлементы требуют объявления таблиц стилей, поскольку встроенный CSS не может быть нацелен на них напрямую.

Реализация псевдоэлементов с помощью таблиц стилей

Для иллюстрации реализации ::before и ::after с таблицами стилей, см. следующий пример:

td { 
    text-align: justify;
}
td::after { 
    content: "";
    display: inline-block;
    width: 100%;
}

В этом примере встроенное свойство CSS text-align: justify обеспечивает выравнивание текста внутри элемента td. Одновременно псевдоэлемент ::after, определенный в таблице стилей, вставляет пустую строку, используя встроенный блок, который растягивается по ширине элемента td.