Использование в вёрстке
Обычно для демонстрации возможностей псевдоэлементов, ::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. Блок со скошенным краем
См. также
- display
- display в CSS
- position
- position в CSS
- relative и absolute
- Абсолютное позиционирование
- Блочные элементы
- Добавление тени
- Липкое позиционирование
- Не только текст
- Нормальное позиционирование
- Описание float
- Открываем блочную модель
- Относительное позиционирование
- Подробнее о позиционировании
- Поток
- Псевдоэлемент ::before
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Свойства позиционирования
- Создание флексбоксов
- Спойлер
- Строчно-блочные элементы
- Строчные элементы
- Фиксированное позиционирование