Главная Вёрстка ::after и ::before Использование в вёрстке

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

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

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

Автор: Влад Мержевич
Последнее изменение: 27.08.2018
Редакторы: Влад Мержевич