Псевдоэлементы ::before и ::after

Псевдоэлементы ::before и ::after позволяют добавлять содержимое (стили) до и после элемента, к которому были применены. Существует несколько типов псевдоэлементов: :first-line, :first-letter, ::selection, :before и :after.

Псевдоэлементы появились в CSS1, но пошли в релиз только в CSS2.1. Вначале в синтаксисе использовалось одно двоеточие, но в CSS3 используется двойное двоеточие для отличия от псевдоклассов. Современные браузеры умеют понимать оба типа синтаксиса псевдоэлементов.

Использовать псевдоэлементы крайне просто: ::before добавляется перед нужным элементом, а ::after — после. Для добавление контента внутри псевдоэлементов можно воспользоваться CSS-свойством content.

Простой пример: необходимо добавить кавычки для цитаты:


blockquote:before {  
    content: open-quote;  
}  
blockquote:after {  
    content: close-quote;  
}

К псевдоэлементом можно применять такие же стили, как и к «реальным»: изменение цвета, добавление фона, регулировка размера шрифта, выравнивание текста и т.д.

Созданные элементы по умолчанию inline-элементы, поэтому при указании высоты или ширины необходимо установить display: block.

Также внутри псевдоэлемента можно использовать картинку вместо обычного текста, и даже добавлять фоновое изображение.

Псевдоэлементы могут быть использованы вместе с псевдоклассами, в нашем примере это поможет добавить hover-эффект кавычкам:


blockquote:hover:after, blockquote:hover:before {  
    background-color: #555;  
}

Также можно применить свойство transition для плавного изменения цвета кавычек.

Дополнительные материалы

Популярно о псевдоэлементах :Before и :After / Хабр

Cool uses of the ::before and ::after pseudoelements

Реклама