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

Обычно для демонстрации возможностей псевдоэлементов, ::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. Блок со скошенным краем

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Блок</title> <style> .panel { font-family: Arial, Helvetica, sans-serif; color: #4d4d4f; /* Цвет текста */ width: 240px; /* Ширина блока */ min-height: 240px; /* Минимальная высота */ padding: 20px; /* Поля вокруг текста */ box-sizing: border-box; /* Не учитываем padding */ overflow: hidden; /* Обрезаем лишнее */ position: relative; /* Относительное позиционирование */ } .panel::before { content: ''; /* Выводим пустой блок */ background: #def0e7; /* Цвет фона */ transform: skewY(-10deg); /* Скашиваем блок */ position: absolute; /* Абсолютное позиционирование */ width: 100%; height: 100%; /* Размеры */ left: 0; /* Положение от левого края */ top: -30px; /* Сдвигаем вверх */ z-index: -1; /* Ставим блок ниже текста */ } .panel p { margin-top: 0; /* Убираем отступ сверху */ } .panel [type="email"] { padding: 5px; /* Поля вокруг текста */ } .panel button { padding: 10px 15px; /* Поля в кнопке */ background: #11897d; /* Цвет фона кнопки */ color: #fff; /* Цвет текста */ border: 1px solid #fff; /* Параметры рамки */ border-radius: 5px; /* Радиус скругления */ } </style> </head> <body> <div class="panel"> <form> <p>Подпишитесь на наши новости.</p> <p><input type="email" placeholder="Ваш email"></p> <p><button>Подписаться</button></p> </form> </div> </body> </html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты