Синтаксис псевдоэлементов :after и :before

Я часто использую псевдо-элементы. Почему они мне так нравятся? Потому что они удобны в использовании и для них не требуется никакой дополнительной разметки. Но статья не о преимуществах псевдоэлементов.

Цель данной статьи выяснить некоторые распространённые заблуждения по поводу псевдоэлементов :after и :before.

Псевдо-что?

Псевдоэлементы называются именно так, потому что они не являются настоящими HTML-элементами. То есть, нет HTML-тегов под названием before или after, но используя CSS, мы можем применить стили к определенному элементу при помощи :before или:after.

Синтаксис одинарного/двойного двоеточия

Нет никакой разницы между :before и ::before или между :after и ::after. Использование двойного двоеточия для псевдоэлементов это просто «новый путь» CSS3.

«::&raquo — это обозначение вводится, чтобы указать разницу между псевдоклассами и псевдоэлементами. Для сохранения совместимости с текущими таблицами стилей пользовательские агенты должны также понимать и предыдущее обозначение «:&raquo для псевдоэлементов в CSS 1 и 2 уровней (а именно, :first-line, :first-letter, :before and :after).

Смотрим спецификацию — https://www.w3.org/TR/selectors-3/#pseudo-elements

Резюме

В Internet Explorer 7 и более старых версиях указанные псевдоэлементы не поддерживаются. Но, к моему удивлению, уже IE8 как раз их поддерживает. И я бы сказал, что это хорошая (и единственная) причина использовать одинарное двоеточие.

update 18.10.11 by Almaz В ИЕ8 псевдоэлементы ограничены относительно других браузеров. Например, по :hover на псевдоэлементы в ИЕ8 не срабатывают display, visibility, background-position. А, к примеру, opacity не работает на псевдоэлементах в этом же браузере в принципе. Потому пользоваться нужно осторожно и внимательно тестировать.

Важно!

Пожалуйста, не забывай, что когда мы обсуждаем, писать одно или два двоеточия — речь идет только о псевдоэлементах. Псевдоклассы в наше обсуждение не попадают.

По теме:

• Эмуляция псевдоэлементов after и before для IE 6-7
• Вставка спецсимволов в генерируемый контент
• Псевдоэлемент before для маркера списка
• Используем псевдоэлемент :first-letter