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

Следует помнить, что к каждому элементу можно добавить только один ::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.

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

Автор: Влад Мержевич
Последнее изменение: 19.02.2018
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid