Before CSS - оригинально, удобно, практично

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

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

Большие перспективы открываются, когда в содержимом псевдоэлемента указан url(). Действительно, этот вариант открывает новые горизонты, как в плане загрузки чего-либо на страницу сайта, так и в возможной активации чего-либо где-либо

Отличительная особенность псевдоэлементов

Псевдоэлементы (::before CSS, ::after) отличаются от элементов, селекторов и псевдоклассов тем, что изначально не существуют в дереве документа. Возможно, на практике это не особенно важно, но, если рассматривать вопрос размещения контента на страницах сайта, то доверять свойству content что-то значимое для поисковика не имеет смысла.

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

Как и псевдоклассы CSS, before и after предваряются символом ":", но по стандарту CSS3 рекомендуется "::". Протестировать конкретное использование на странице никогда не будет лишним: некоторые браузеры или их версии могут просто не заметить тот или иной псевдоэлемент.

Общие правила использования

Поместив, например, div элемент с описанием class='scElement' и содержанием "Element" на страницу, указав в таблице стилей CSS-описание:

.scElement {
POSITION...;
z-index...;
...

},

можно применить к нему псевдокласс ":hover" и псевдоэлемент "::before" CSS:

.scElement:hover::before {content:'prefix'; color...; background-color...;}.

Тогда при наведении курсора мышки перед словом 'Element' будет появляться слово 'prefix', в котором изменится цвет букв и фона.

Варианты содержания псевдоэлемента

Если не указывать свойства в псевдоэлементе, они останутся такими же, как у основного элемента - scElement. Можно указать url, и тогда свойство content: url('/scBox/rm-v/sc-rights.png') при наведении курсора покажет картинку на элементе. В случае content: "\03B1" появится математический символ "alfa", но использовать специальные символы: " ", "<", "«", "»" и прочие не следует - они отобразятся как есть.

Допускается много вариантов указания содержания псевдоэлементов: обычный "текст", url(), последовательность шестнадцатеричных символов, обозначения: open-quote/close-quote или no-open-quote/no-close-quote и др. Поскольку допускается указание абсолютной позиции содержания посредством свойств стилей, то, применяя before, CSS позволит разместить псевдоэлемент в любом месте элемента, к которому он привязан.

Можно комбинировать одновременное использование before и after. Поэтому, размещая при помощи CSS before content символы, можно получить различные эффекты, а комбинируя различные псевдоклассы и псевдоэлементы, удивить посетителя, не затратив при этом ни одного байта JavaScript-кода.

Особенности псевдоэлементов

Для их обозначения принят символ ":", как и для обозначения псевдоклассов, но в CSS3 отличие псевдоэлементов принято обозначать "::". Браузеры, понимающие это, воспринимают оба обозначения. Пробелы в записи не допускаются, строка, в которой записан псевдокласс и (или только) псевдоэлемент, записывается вместе:

scElement:hover::before { content: 'prefix'; ... }

scElement:active:after { content: 'suffix'; ... }

Важно не забывать: CSS before работает вне контента сайта. Стили не имеют отношения к содержанию страницы. Псевдоэлементы - не исключение. Они не присутствуют в дереве DOM и нежелательно их использовать в значимых участках сайта - в контент они не попадут.

Использование ":" и "::" поддерживается мобильными платформами и современными браузерами, но проверить работу на устаревших версиях часто не бывает лишним.

Содержание псевдоэлемента не включается в контент сайта. Его не увидят поисковики. Как использовать это обстоятельство - зависит от конкретной ситуации, но возможности использовать CSS before, как и after, независимо или в комплексе, интересно, когда content представляет собой url(). Прямое использование содержания псевдоэлемента, как ссылки на сайт, позволит скачать с него файл, например, картинку.

Возможность изменения файлов стилей на сайте (файлы таблиц каскадных стилей - не исключение) не мешает формировать и использовать псевдоэлементы так, как удобно в конкретный момент времени, в нужном месте алгоритма, в зависимости от действий посетителя.