Псевдоэлементы (: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 совпадает со значением родителя.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: