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