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

Подготовила: Анна Лысак Дата публикации: 08.08.2011

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

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

синтаксис  :after и :before

Псевдо-что?

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

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

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

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

Смотрим спецификацию.

Резюме

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

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

Важно!

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

Материалы

По теме:

Показать комментарии