Использование в вёрстке

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

Сами псевдоэлементы в HTML можно представить следующим образом.

<div><span class="before"></span>Содержимое<span class="after"></span></div>

Про псевдоэлементы следует помнить следующее:

• это строчные элементы;
• они не работают без свойства content;
• они являются дочерними элементами.

Для строчных элементов нельзя задать ширину и высоту, поэтому псевдоэлементы следует сделать блочными через display или, что применяется чаще, задать им абсолютное позиционирование. В сочетании с относительным позиционированием у родителя это позволяет нам легко управлять положением блока.

В качестве демонстрации сделаем блок со скошенным краем, как показано на рис. 1.

Рис. 1. Блок подписки

Цветной прямоугольник мы добавим через ::before и сделаем его скошенным через свойство transform с функцией skewY(). Далее используя абсолютное позиционирование зададим блоку размеры, совпадающие с родителем, и сдвинем блок вверх через свойство top, чтобы спрятать верхний скошенный край. Цветной блок отображается поверх текста, так что его надо опустить ниже с помощью свойства z-index со значением -1.

Финальный код показан в примере 1.

Пример 1. Блок со скошенным краем