Псевдоэлементы (:before, :after) в CSS

Существует возможность создать HTML элемент с помощью CSS. Это элементы :before и :after. Они называются называются псевдоэлементами и не могут существовать без элемента, к которому они относятся. Другими словами, если удалить тот элемент, к которому они привязаны, то псевдоэлементы тоже будут удалены.

Давайте попробуем посмотреть на практике, как же можно создать эти элементы и для чего они нужны. Приведём простейший пример - это оформление цитаты. Создадим контейнер с текстом и оформим этот блок как цитату. С помощью CSS добавим ему кавычки слева и справа, чуть изменим стиль и фон:

<style>
   div {
      background: #eaf2f5;
      padding: 30px;
   }
   div:before {
      content: '“';
      font-size: 50px;
      position: relative;
      top: -30px;
      left: -20px;
      float: left;
   }
   div:after { 
      content: '”';  
      font-size: 50px;
      position: relative;
      top: 10px;
      right: -20px;
      float: right;
   }
</style>
<div>Тише, мыши, кот на крыше</div>

Получится такой результат:

Тише, мыши, кот на крыше

При создании псевдоэлементов их свойства display совпадает со значением родителя.