Несколько псевдоэлементов

Следует помнить, что к каждому элементу можно добавить только один ::before и только один ::after. В большинстве ситуаций двух псевдоэлементов вполне достаточно, хотя в сложных случаях их потребуется больше. При этом можно воспользоваться таким трюком — внутрь нашего элемента вставить пустой <div> и к нему уже добавить ещё псевдоэлементы.

Модифицируем повёрнутую рамку, добавив к ней ещё и уголки (рис. 1).

Рамка с уголками

Рис. 1. Рамка с уголками

Два уголка плюс рамка — итого получается три псевдоэлемента. ::after и ::before «навесим» на элемент <figure>, а ещё один добавим к <div> с классом border внутри <figure>, как показано в примере 1.

Пример 1. Несколько псевдоэлементов

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Рамка</title> <style> body { background: #f7f6f2; } figure { display: inline-block; /* Строчно-блочный элемент */ padding: 12px; /* Расстояние от рамки до уголка */ position: relative; /* Относительное позиционирование */ overflow: hidden; /* Обрезаем лишнее */ } figure::before, figure::after { content: ''; /* Выводим уголки */ position: absolute; /* Абсолютное позиционирование */ z-index: 2; /* Уголки поверх */ width: 70px; height: 70px; /* Размеры уголка */ left: -35px; bottom: -35px; /* Левый нижний уголок */ transform: rotate(45deg); /* Поворачиваем уголок */ box-shadow: 0 0 10px rgba(0,0,0,.5); /* Параметры тени */ outline: #c2b59d dashed 1px; /* Пунктирная линия */ outline-offset: -3px; /* Расстояние от края до линии */ background: #f7f6f2; /* Цвет фона */ } figure::after { /* Правый верхний уголок */ left: auto; right: -35px; top: -35px; } .border { position: relative; /* Относительное позиционирование */ } .border, .border::after { padding: 4px; /* Толщина внутренней рамки */ background: #dad6cf; /* Цвет внутренней рамки */ border: 2px solid #c2b59d; /* Параметры рамки */ box-sizing: border-box; /* Не учитываем padding */ } .border img { display: block; } .border::after { content: ''; /* Выводим рамку */ position: absolute; /* Абсолютное позиционирование */ left: 0; top: 0; /* Положение */ width: 100%; height: 100%; /* Размеры */ z-index: -1; /* Опускаем вниз */ transform: rotate(-7deg); /* Поворачиваем */ } </style> </head> <body> <figure> <div class="border"> <img src="image/b-52.jpg" alt="Б-52" width="150" height="150"> </div> </figure> </body> </html>

Уголки сделаем с помощью квадратов, фон которых совпадает с фоном веб-страницы. Один уголок располагается в правом верхнем углу, а другой — в левом нижнем. Затем уголки поворачиваются на 45 градусов, а лишние части удаляются через свойство overflow со значением hidden.

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

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