A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.
/* The first line of every
Element. */ p::first-line { color: blue; text-transform: uppercase; }
Syntax
selector::pseudo-element { property: value; }You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.
Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.
Index of standard pseudo-elements
| Browser | Lowest Version | Support of |
|---|---|---|
| Internet Explorer | 8.0 | :pseudo-element |
| 9.0 | ||
| Firefox (Gecko) | 1.0 (1.0) | :pseudo-element |
| 1.0 (1.5) | :pseudo-element::pseudo-element | |
| Opera | 4.0 | :pseudo-element |
| 7.0 | :pseudo-element::pseudo-element | |
| Safari (WebKit) | 1.0 (85) | :pseudo-element::pseudo-element |
От автора: спецификация CSS Pseudo-elements Module Level 4 проливает свет на поведение существующих псевдоэлементов и предоставляет новые. Тем не менее, только несколько из новых псевдоэлементов имеют хоть какую-то поддержку в последних версиях браузеров.
Сегодня мы поговорим о следующих псевдоэлементах:
::before — вставляет генерируемый контент перед контентом элемента
::after — вставляет генерируемый контент после контента элемента
::first-letter — выбирает первую букву элемента
::first-line — выбирает первую строку элемента
::selection — стилизует текст, выделенный курсором
Из них элементы::first–letter, ::first–line и::selection влияют на контент, который входит в исходники. Псевдоэлементы::before и::after, наоборот, вставляют контент в документ, которого нет в исходниках. Разберем поподробнее все псевдоэлементы.
Замечание: синтаксис с одним двоеточием
Вы могли видеть версии::first–letter, ::first–line, ::before и::after с одним двоеточием в старом CSS. В CSS2 эти псевдоэлементы задавались через одноразовое двоеточие:. IE8 требует синтаксис с одинарным двоеточием, хотя большая часть других браузеров поддерживает оба варианта. Лучше использовать синтаксис с двойным двоеточием.
Псевдоэлементы::before и::after
Большая часть псевдоэлементов позволяет выбирать контент, который уже присутствует в исходниках документа, но не задан с помощью языка (другими словами, ваш HTML). Однако::before и::after работают по-другому. Эти псевдоэлементы добавляют генерируемый контент в дерево документа. Созданный контент не существует в HTML исходниках, но он отображается.
Зачем использовать генерируемый контент? Например, можно помечать обязательные поля формы, добавляя контент после лейблов:
/* Применяется к лейблу, ассоциирующемуся с требуемым полем */ .required::after { content: " (Required) "; color: #c00; font-size: .8em; }
В нужном поле формы необходимо использовать HTML свойство required. Так как данная информация уже доступна в DOM, то::before и::after выступают в роли помощников. Это не критический контент, поэтому его можно и не вносить в исходники.
Замечание: генерируемый контент и доступность
Некоторые скрин ридеры и браузеры распознают и читают генерируемый контент, однако большая часть этого не умеет. Не используйте псевдоэлементы::before и::after для предоставления генерируемого контента для пользователей с ограниченными возможностями. Более подробно этот вопрос можно изучить в статье Leonie Watson «поддержка доступности для генерируемого CSS контента ».
Другой способ применения::before и::after – добавление префикса или суффикса в контент. Вышеупомянутая форма может использовать вспомогательный текст, как показано ниже:
< form method = "post" action = "/save" > < fieldset > < legend > Change Your Password < / legend > < p > < label for = "password" > Enter a new password < / label > < input type = "password" id = "password" name = "password" > < / p > < p > < label for = "password2" > Retype your password < / label > < input type = "password" id = "password2" name = "password2" > < / p > < p class = "helptext" > Longer passwords are stronger . < / p > < p > < button type = "submit" > Save changes < / button > < / p > < / fieldset > < / form > |
Заключим наш вспомогательный текст в парные скобки с помощью::before и::after.
Helptext::before { content: "("; } .helptext::after { content: ")"; }
Helptext :: before { content : "(" ; Helptext :: after { content : ")" ; |
Результат.
Возможно, самый полезный способ применения::before и::after – очистка обтекаемых элементов. Nicolas Gallagher представил эту технику (которая основана на работе Thierry Koblentz) в своем посте «новый микро clearfix хак »:
/* Для поддержки IE <= 9 используйте:before и:after */ .clearfix::before, .clearfix::after { content: " "; /* Обратите внимание на пробел между кавычек. */ display: table; } .clearfix::after { clear: both; }
Добавьте класс clearfix к любому элементу, который необходимо очистить после обтекаемого элемента.
Псевдоклассы::before и::after ведут себя полностью, как дочерние элементы тега, за которым они закреплены. Они наследуют все возможные свойства родителя и расположены внутри блока родителя. Они также взаимодействуют с другими блоковыми элементами, как если бы они были настоящими тегами. Свойства display: block или display: table на::before и::after работают точно так же, как и на других элементах.
Предупреждение: один псевдоэлемент на селектор
На данный момент на один селектор разрешается применять только один псевдоэлемент. То есть запись типа p::first-line::before неправильная.
Создание типографических эффектов с помощью:first-letter
Псевдоэлементы::before и::after вставляют контент, а::first-letter работает с контентом, уже прописанном в исходниках. С его помощью можно создавать эффект первой буквы или буквицы, который вы могли видеть в журналах и книгах.
Замечание: первая буква и буквицы
Эффект первой буквы – это буква в верхнем регистре в начале текста, которой задан больший размер шрифта по отношению к остальному тексту. Буквица похожа на первую букву, однако буквица вставляется в первый параграф из минимум двух строк.
Стили ниже добавляют первую заглавную букву во все параграфы p в документе:
p::first-letter { font-family: serif; font-weight: bold; font-size: 3em; font-style: italic; color: #3f51b5; }
p :: first - letter { font - family : serif ; font - weight : bold ; font - size : 3em ; font - style : italic ; color : #3f51b5; |
Из скриншота можно заметить, что::first-letter изменяет line-height первой строки, если элементу было задано значение line-height без единиц измерения. В данном случае все теги p наследуют значение line-height 1.5 от тега body.
Существует три способа сгладить эту проблему:
уменьшить значение line-height для псевдоэлемента::first–letter, почти всегда подойдет значение.5;
задать line-height с единицами измерения для псевдоэлемента::first–letter;
задать line-height с единицами измерения для body или родителя::first–letter.
Первый вариант сохраняет вертикальный ритм, как в случае со значением line-height без единиц измерения. Второй вариант ограничивает сторонние эффекты фиксированного line-height до самих псевдоэлементов. Третий вариант – самый плохой, есть большая вероятность того, что вы создадите побочный эффект, который нужно будет переписывать с помощью дополнительного CSS кода.
В нашем случае давайте уменьшим значение line-height для p::first-letter до.5 (и перепишем свойства в файле, будем использовать сокращенное свойство font):
p::first-letter { font: bold italic 3em / .5 serif; color: #3f51b5; }
p :: first - letter { color : #3f51b5; |
Результат можно посмотреть ниже. Заметьте, что нам также нужно было настроить нижний margin каждого параграфа p, чтобы компенсировать уменьшенное значение line-height на p::first-letter.
Для создания буквиц понадобится чуть больше строк CSS. В отличие от первых заглавных букв, прилегающий текст к буквице обтекает ее. То есть нам нужно добавить float: left; в наши стили. Также мы добавим верхний, правый и нижний margin:
p::first-letter { font: bold italic 3em / .5 serif; font-style: italic; color: #607d8b; float: left; margin: 0.2em 0.25em .01em 0; }
p :: first - letter { font : bold italic 3em / . 5 serif ; font - style : italic ; color : #607d8b; float : left ; margin : 0.2em 0.25em . 01em 0 ; |
Плавающий элемент, или в нашем случае псевдоэлемент, заставляет остальной текст обтекать его, как показано ниже.
Если вы не используете px или rem для установки размеров, margin и line-height, будет очень сложно идеально стилизовать::first-letter во всех браузерах.
Иногда в качестве первой буквы текстового элемента выступает знак препинания. Например, новость, начинающаяся с цитаты:
“Lorem ipsum dolor sit amet, consectetur adipiscing elit.” Fusce odio leo, sollicitudin vel mattis eget, ...
< p > & #8220;Lorem ipsum dolor sit amet, consectetur adipiscing elit.” Fusce odio leo, sollicitudin vel mattis eget, ... |
В данном случае стили для::first-letter будут применены как к открывающей кавычке, так и к первой букве, как показано ниже. Стили применяются одинаково во всех браузерах.
Тем не менее, результат будет отличаться, когда знак пунктуации генерируется элементом. Рассмотрим следующую разметку:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce odio leo, sollicitudin vel mattis eget, iaculis sit ...
< p > < q > Lorem ipsum dolor sit amet , consectetur adipiscing elit . < / q > Fusce odio leo , sollicitudin vel mattis eget , iaculis sit . . . < / p > |
На данный момент браузеры отрисовывают тег q в виде кавычек, использующихся в определенном языке, которые будут открываться и закрываться. Однако не все браузеры одинаково распознают такие кавычки. В Firefox 42 (см. ниже), Safari 8 и более ранних версиях::first-letter изменяет только открывающую кавычку.
В Chrome, Opera и Yandex открывающая кавычка тега q и первая буква параграфа не стилизуются. Ниже показан скриншот в Chrome.
IE применяет стили как к открывающей кавычке, так и к первой букве параграфа. Смотрите ниже.
В спецификации CSS Pseudo-elements Module Level 4 говорится, что знак пунктуации, предшествующий или следующий сразу после первой буквы или символа должен стилизоваться. Однако в спецификации нет точного разъяснения насчет применения стилей к генерируемым знакам пунктуации.
Баги браузеров при использовании::first-letter
По большей части::first-letter работает во всех браузерах ровно так, как ожидаешь. Как и со всеми CSS свойствами, у данного псевдоэлемента есть парочка багов и случаев неправильного использования, о которых нужно знать.
В Firefox 39 и раньше некоторые символы заставляют Firefox игнорировать правило::first–letter: ‑,$,^,_,+,`,~,>,<.>
Это относится к случаям, когда первый символ задан через::before и свойство content, а также если он прописан в исходниках документа. Фикса этого бага нет. Если используете::first-letter, вам придется избегать этих символов в начале параграфа.
Замечание: баги в Blink браузерах
Некоторые версии Blink браузеров не применят правило::first–letter, если у родителя задано свойство display со значением inline или table. Баг есть в Chrome 42, Opera 29 и Yandex 15. Баг пофиксили в Chrome 44, однако релиз увидит свет не раньше, чем эта книга окажется у вас в руках. Самый простой способ обойти баг – добавить к родителю свойство display: inline-block, display: block или display: table-cell.
Создание типографических эффектов с помощью::first-line
Псевдокласс::first-line работает почти как::first-letter, только эффект распространяется на всю первую строку элемента. Можно, например, делать первую строку каждого параграфа больше и изменять цвет текста:
Можно принудительно поставить конец первой строки с помощью br или hr, как показано ниже. К сожалению, это не всегда работает. Если ваш элемент может вместить только 72 символа, то тег br после 80-го символа никак не повлияет на псевдоэлемент::first-line. Вы просто получите странный разрыв строки.
Точно так же и с неразрывным пробелом (), который вставляется, чтобы не разрывать слова между строк. Это никак не повлияет на::first-line. Слово, которое расположено перед будет принудительно перемещено на строку, где расположен текст после неразрывного пробела.
Генерируемый контент, добавленный через::before, будет отображаться на первой строке, как показано ниже.
Если генерируемый текст достаточно длинный, он полностью заполнит первую строку. Однако если добавить display: block (например, p::before {content: ‘!!!’; display: block;}), то контент займет всю первую строку целиком.
К сожалению, этот баг до сих пор есть в Firefox 40 и более ранних версиях. Firefox полностью игнорирует правило.
Забавные интерфейсы с помощью::selection
Псевдоэлемент::selection относится к так называемым «подсвечивающим» псевдоэлементам, прописанным в спецификации CSS Pseudo-Elements Module Level 4. Данный подсвечивающий псевдоэлемент ранее входил в спецификацию Selectors Level 3, единственный, поддерживающийся в браузерах.
С помощью::selection можно применять CSS стили к контенту, выделенному мышкой. По умолчанию фон и цвет текста выделенного контента задаются системой. Однако разработчики могут изменять эти настройки, как показано ниже.
С::selection можно использовать не все свойства. В спецификации прописаны только следующие свойства:
Помните о доступности при выборе цвета переднего фона и заднего фона для::selection. Некоторые комбинации цветов дают плохой контраст для слабо видящих людей. Другие комбинации могут быть неразборчивыми для дальтоников. Перед конечным выбором цветов используйте инструмент проверки контраста и симулятор дальтонизма.
В Pseudo-Elements Module также прописаны псевдоклассы::spelling-error и::grammar-error. Когда они будут реализованы, мы сможем стилизовать текст с ошибками, проверяемыми по словарю браузера.
Псевдоэлементы - это особый вид свойств CSS, которые позволяют работать не над самим элементом, а над его отдельной частью.
Вот перечень всех псевдоэлеметов:
- :first-letter - Стиль первой буквы текстового блока
- :first-line - Стиль первой строки текстового блока
- :after - Добавляет содержимое после элемента.
- :before - Добавляет содержимое до элемента.
- ::selection - Стиль выделенного пользователем текста.
Так же как и в случае с псевдоклассами , псевдоэлементы используются согласно следующего синтаксиса:
p:first-letter { color:#ff0000}p
- селектор, к которому применяется псевдоэлемент.
:first-letter
- после двоеточия собственно псевдоэлемент.
{color:#ff0000}
- блок объявления стилей в фигурных скобках.
В данном случае мы указали, что первая буква всех параграфов будет красного цвета.
Ну что ж давайте пробежимся по перечисленным псевдоэлементам.
Стиль первой буквы.
Псевдоэлемент first-letter задаёт стиль первой буквы в каком либо текстовом блоке, проще говоря, без особых усилий позволяет сделать "буквицу". Вы заметили, что на этом сайте первые буквы в абзацах отличны цветом и размером от других букв? - это и есть пример работы псевдоэлемента first-letter .
Ну а если Вам этого примера мало можете взглянуть на ещё один:
Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.
Осмысливая мысли, в смысле смысла, есть смысл, помыслить о немыслимом..
В примере выше мы изменили размер, шрифт, цвет и жирность первой буквы для всех параграфов на странице.
Стиль первой строки.
Псевдоэлемент first-line определяет стиль первой строки в текстовом блоке.
Если бы при приеме на работу… … …
Однажды молодой сисадмин … … …
Честно признаться, я не знаю в каких ситуациях действительно целесообразно применять псевдоэлемент first-line , хотя не исключаю, что такие ситуации бывают. Обусловлено это в первую очередь тем, что в зависимости от расширения экрана, размера шрифта, интервала между словами и символам и т.д. первая строка в текстовом блоке будет разной длины, что не позволяет веб мастеру полностью контролировать стиль данного текстового блока.
Контент.
Псевдоэлементы after и before предназначены для "врезки" в страницу сайта контента который изначально неуказан в HTML документе. Вставляется содержание перед (:before ) или после (:after ) какого либо элемента с помощью свойства content , которое собственно и определяет содержимое для вставки.
Всё вместе пишется так:
p:after {content: "Конец, а кто слушал молодец!!"; }Теперь после каждого параграфа будет добавляться надпись: "Конец, а кто слушал молодец!!"
Значением свойства content может быть:
- "текст" - собственно любой текст или символы.
- "\0410" - юникод.
- url(путь) - адрес какого либо объекта.
- open-quote - открывающая кавычка.
- close-quote - закрывающая кавычка.
- no-open-quote - отменяет открывающую кавычку.
- no-close-quote - отменяет закрывающую кавычку.
- inherit - наследует значение элемента родителя.
- none - ничего не добавляется.
- normal - для псевдоэлементов before и after тоже самое что и none .
- counter - показывает значение счетчика, заданного свойством counter-reset .
- attr(атрибут тега) - показывает текст, который является значением атрибута того или иного тега указанного в скобках.
Заголовок с сердечком.
Параграфы с добавлением слова "анекдот:" вначале и смайлика в конце:
Если бы при приеме на работу...
Однажды молодой сисадмин...
После рисунка добавляется значение его атрибута: "src" - путь к рисунку:
Цитата в кавычках:
Лёд тронулся, господа присяжные заседатели!
Список с нестандартными маркерами:
- Первый
- Второй
- Третий
Чувствую перехитрил я с примером, поэтому несколько комментариев к нему:
Звездочка перед псевдоэлементом *:псевдоэлемент{свойство} говорит о том, что указанные правила стиля распространяются на все элементы. Так в нашем примере текст в начале везде синий, а в конце везде красный, если он конечно не указывается дополнительно, как например в случае с зелёными "маркерами" в списке из примера.
В качестве добавляемого контента может вступать какой либо объект, в примере мы добавили рисунок ко всем заголовкам, однако если браузер не сможет обработать тот или иной файл, то ничего не добавится.
Спецсимволы HTML (например, спецсимвол: ¶ ), будут отображаться простым текстом (¶ а не ¶ ) так что если необходимо добавить какую либо хитрую закорючку используйте юникод.
Псевдоэлементы after и before , как и свойство content не поддерживаются браузерами Internet Explorer 7 и ниже.
Псевдоэлемент::selection.
Псевдоэлемент ::selection (я не опечатался, пишется именно с двумя двоеточиями) указывает на стиль выделенного пользователем текста.
Данный псевдоэлемент появился на свет только в спецификации CSS3 и к сожалению поддерживается не всеми браузерами так IE его полностью игнорирует, а браузер Firefox использует свой аналогичный псевдоэлемент ::-moz-selection который официально не входит в спецификацию CSS.
Попробуете выделить данный текст, как будто Вы собираетесь его скопировать. Если Ваш браузер (например Opera 9.6 и выше) поддерживает псевдоэлемент::selection, Вы увидите, что выделенный текст станет красным, а его фон зелёным.
К данному псевдоэлементу можно применить только следующие CSS свойства: color , background и background-color .
В спецификации CSS3 в отличии от CSS2 и CSS2.1 все псевдоэлементы принято писать с двумя двоеточиями ::first-letter, ::first-line, ::after, ::before, и новый ::selection - таким вот способом разработчики решили оделить пседоэлементы от псевдоклассов . Однако такой синтаксис напрочь игнорирует Internet Explorer до 9 версии включительно! Так что пока псевдоэлементы лучше писать по старинке с одним двоеточием. Однако следует понимать, что например :first-letter и ::first-letter это формально два разных псевдоэлемента.
В правилах стиля для псевдоэлементов допустимо использовать только свойства, относящиеся к шрифту, тексту и его фону.
Псевдоэлементы CSS это своего рода условные составные части уже существующих html тегов.
С точки зрения синтаксиса они ни чем не отличаются от псевдоклассов . Их схожесть также проявляется в некоторой «фантомности» того, к чему они применяются, только в отличие от псевдоклассов псевдоэлементы реагируют не на изменение состояния определенных тегов на странице, а создают своего рода фантомные составляющие части уже существующих тегов.
Как пользоваться селекторами псевдоэлементов CSS?
Задачей селектора псеводоэлемента CSS является выбор из структуры документа составных частей элементов подпадающих под характеристики селектора и спецификацию псевдоэлемента.
Задается он при помощи двуеточия после которого следует название используемого псевдоэлемента.
В качестве примера давайте выведем первую букву в абзацах красным цветом большего размера:
p: first- letter { font- size: 150 %; color: red; }
Нюансом при использовании псевдоэлементов CSS является то, что они должны идти в конце селектора. Тоесть такая запись работать не будет:
p: first- line span{ color: red; }
Какие бывают псевдоэлементы?
Подводя итоги
Псевдоэлементы css используются для упрощения оформления html документа в некоторых частных случаях. Они дают нам возможность не добавлять лишние теги, а прописать оформление к уже существующим тегам в CSS.
Чаще всего на практике используются:after и:before (к примеру для добавления маркеров спискам, более сложного оформления выпадающего меню), чуть реже:first-letter и:first-line. Области же применения остальных псевдоэлементов достаточно экзотичны и крайне редко встречаются в практике.
Да и не стоит забывать, что только эти 4 селектора поддерживаются всеми браузерами достаточно давно. Остальные псевдоэлементы начали входить в обиход с появлением стандарта CSS3, что означает отсутствие их поддержки у старых браузеров.
Последнее обновление: 21.04.2016
Псевдоэлементы обладают рядом дополнительных возможностей по выбору элементов веб-страницы и похожи на псевдоклассы. Список доступных псевдоэлементов:
::first-letter : позволяет выбрать первую букву из текста
::first-line : стилизует первую строку текста
::before : добавляет сообщение до определенного элемента
::after : добавляет сообщение после определенного элемента
::selection : выбирает выбранные пользователем элементы
В CSS2 перед псевдоэлементами, как и перед псевдоклассами, ставилось одно двоеточие. В CSS3 для отличия их от псевдоклассов псевдоэлементы стали предваряться двумя двоеточиями. Однако для совместимости с более старыми браузерами, которые не поддерживают CSS3, допустимо использование одного двоеточия: :before .
Стилизуем текст, используя псевдоэлементы first-letter и first-line:
Но он ничего не видал. Над ним не было ничего уже, кроме неба, - высокого неба, не ясного, но все-таки неизмеримо высокого, с тихо ползущими по нем серыми облаками.
Используем псевдоэлементы before и after:
Не пытайтесь засунуть язык в электрическую розетку.
Здесь псевдоэлеметы применяются к элементу с классом warning . Оба псевдоэлемента принимают свойство content , которое хранит вставляемый текст. И также для повышения внимания псевдоэлементы используют выделение текста жирным с помощью свойства font-weight: bold; .
Используем псевдоэлемент selection для стилизации выбранных элементов:
Пседвоэлементы в CSS3 позволяют форматировать текст.