Псевдоэлементы
Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.
Синтаксис использования псевдоэлементов следующий.
Вначале следует имя селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже.
Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей.
Далее перечислены все псевдоэлементы, их описание и свойства.
:after
Применяется для вставки назначенного контента после содержимого элемента. Этот псевдоэлемент работает совместно со стилевым свойством content , которое определяет содержимое для вставки. В примере 16.1 показано использование псевдоэлемента :after для добавления текста в конец абзаца.
Пример 16.1. Применение :after
HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Псевдоэлементы
Метод ловли льва простым перебором.
Результат примера показан на рис. 16.1.
Рис. 16.1. Добавление текста к абзацу с помощью :after
В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением свойства content .
Псевдоэлементы :after и :before , а также стилевое свойство content не поддерживаются браузером Internet Explorer до седьмой версии включительно.
:before
По своему действию :before аналогичен псевдоэлементу :after , но вставляет контент до содержимого элемента. В примере 16.2 показано добавление маркеров своего типа к элементам списка посредством скрытия стандартных маркеров и применения псевдоэлемента :before .
Пример 16.2. Использование :before
HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx 4
Результат примера показан ниже (рис. 16.2).
Рис. 16.2. Изменение вида маркеров с помощью :before
В данном примере псевдоэлемент :before устанавливается для селектора LI , определяющего элементы списка. Добавление желаемых символов происходит путём задания значения свойства content . Обратите внимание, что в качестве аргумента не обязательно выступает текст, могут применяться также символы юникода.
И :after и :before дают результат только для тех элементов, у которых имеется содержимое, поэтому добавление к селектору img или input ничего не выведет.
:first-letter
Определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.
Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.
Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 16.3).
Пример 16.3. Использование :first-letter
HTML5 CSS 2.1 IE Cr Op Sa Fx
Псевдоэлементы Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли.
Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.
Результат примера показан ниже (рис. 16.3).
Рис. 16.3. Создание выступающего инициала
В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.
:first-line
Определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д.
К псевдоэлементу :first-line могут применяться не все стилевые свойства. Допустимо использовать свойства, относящиеся к шрифту, изменению цвет текста и фона, а также: clear , line-height , letter-spacing , text-decoration , text-transform , vertical-align и word-spacing .
В примере 16.4 показано использование псевдоэлемента :first-line применительно к абзацу текста.
Пример 16.4. Выделение первой строки текста
HTML5 CSS 2.1 IE Cr Op Sa Fx
Псевдоэлементы Интересно, а существует ли способ действительно практичного применения свойства first-line? Нет, не такого, чтобы можно было бы показать, что это возможно, а чтобы воистину захватило дух от красоты решения, загорелись глаза от скрытых перспектив, после чего остается только сказать себе, что вот это вот, это самое сделать по-другому, также изящно и эффектно просто невозможно.
Результат примера показан на рис. 16.4.
Рис. 16.4. Результат применения псевдоэлемента :first-line
В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов.
Вопросы для проверки
1. Какой псевдоэлемент позволяет добавить текст в начало предложения?
- :after
- :before
- :first-line
- :first-text
- :first-letter
2. Что делает следующий стиль?
OL LI:first-letter <
color: red;
>
- Изменяет цвет первой буквы элемента маркированного списка.
- Изменяет цвет первой буквы элемента нумерованного списка.
- Изменяет цвет первой строки в маркированном списке.
- Изменяет цвет первой строки в нумерованном списке.
- Изменяет цвет текста всего списка.
3. Какой селектор написан с ошибкой?
- p.new:before
- abbr:first-line
- p.new.back:after
- div:before:first-letter
- a:hover:before
Ответы
2. Изменяет цвет первой буквы элемента нумерованного списка.
Псевдоэлементы
Псевдоэлементы позволяют задать стиль элементов, которые не определены в дереве документа, а также генерировать содержимое, которого нет в исходном коде текста. По своему синтаксису похожи на псевдоклассы, но после имени селектора ставится два двоеточия.
p::first-letter
Далее перечислим наиболее распространённые псевдоэлементы.
::first-letter
Определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал. Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.
::first-letter будет работать только для блочных текстовых элементов вроде и
.
Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору p псевдоэлемент ::first-letter и установить желаемый стиль буквы. В частности, увеличить размер текста и поменять его цвет (пример 1).
Пример 1. Использование ::first-letter
Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли.
Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.
В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста. Результат примера показан на рис. 1.
Рис. 1. Создание выступающего инициала
::first-line
Определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и др.
К псевдоэлементу ::first-line могут применяться не все стилевые свойства. Допустимо использовать свойства, относящиеся к шрифту, изменению цвет текста и фона.
В примере 2 показано использование псевдоэлемента ::first-line применительно к абзацу текста.
Пример 2. Выделение первой строки текста
Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли.
Результат примера показан на рис. 2.
Рис. 2. Результат применения псевдоэлемента ::first-line
В данном примере первая строка выделяется синим цветом и жирным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остаётся постоянным, независимо от числа входящих в неё слов.
::after
Применяется для добавления назначенного контента после содержимого элемента. Этот псевдоэлемент работает только совместно со стилевым свойством content, которое определяет содержимое для вставки.
В примере 3 показано использование псевдоэлемента ::after для добавления текста в конце абзаца.
Пример 3. Применение ::after
Результат примера показан на рис. 3.
Рис. 3. Добавление текста к абзацу с помощью ::after
В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением свойства content .
::before
По своему действию ::before аналогичен псевдоэлементу ::after , но вставляет контент до содержимого элемента. В примере 4 показано добавление маркеров своего типа к пунктам списка посредством сокрытия стандартных маркеров и применения псевдоэлемента ::before .
Не у всех элементов есть собственное содержимое, поэтому ::after и ::before не дают результата для , и ряда других элементов.
Пример 4. Использование ::before
Результат данного примера показан на рис. 4.
Рис. 4. Изменение вида маркеров с помощью ::before
В данном примере псевдоэлемент ::before устанавливается для селектора li и определяет маркеры списка. Добавление желаемых символов происходит путём задания значения свойства content .
Псевдоэлементы
Позволяет задать стиль кнопки «Обзор» при загрузке файлов.
Псевдоэлемент ::-ms-check
Задаёт стиль переключателей и флажков в Internet Explorer.
Псевдоэлемент ::-ms-clear
Задаёт стиль кнопки для очистки текстового поля. Исходно эта кнопка не видна, она появляется в правой части поля только при вводе текста.
Псевдоэлемент ::-ms-expand
Задаёт стиль кнопки раскрытия списка формы в браузерах Internet Explorer и Edge.
Псевдоэлемент ::-ms-fill
Задаёт стиль индикатора прогресса в браузерах Internet Explorer и Edge. Само значение индикатора и его положение меняется динамически посредством скриптов.
Псевдоэлемент ::-ms-fill-lower
Задаёт стилевые параметры слайдера в браузерах Internet Explorer и Edge.
Псевдоэлемент ::-ms-fill-upper
Задаёт стилевые параметры слайдера в Internet Explorer и Edge.
Псевдоэлемент ::-ms-reveal
Задаёт стиль кнопки для просмотра пароля в поле формы. Кнопка исходно не видна и появляется в правой части поля при вводе пароля.
Псевдоэлемент ::-ms-thumb
Задаёт стиль ползунка для слайдера в Internet Explorer и Edge.
Псевдоэлемент ::-ms-ticks-after
Применяет стилевые параметры к делениям ниже дорожки слайдера в Internet Explorer и Edge.
Псевдоэлемент ::-ms-ticks-before
Применяет стилевые параметры к делениям выше дорожки слайдера в Internet Explorer и Edge.
Псевдоэлемент ::-ms-tooltip
Применяет стилевые параметры к всплывающей подсказке слайдера, где отображается выбранное текущее значение, в Internet Explorer и Edge.
Псевдоэлемент ::-ms-track
Задаёт стиль дорожки ползунка для слайдера в Internet Explorer и Edge.
Псевдоэлемент ::-ms-value
Позволяет изменять стиль элементов формы в браузерах Internet Explorer и Edge.
Псевдоэлемент ::-webkit-meter-bar
Псевдоэлемент ::-webkit-meter-bar используется для изменения стиля полосы шкалы элемента meter.
Псевдоэлемент ::-webkit-meter-even-less-good-value
Псевдоэлемент ::-webkit-meter-optimum-value
Псевдоэлемент ::-webkit-meter-optimum-value используется для изменения стиля шкалы элемента meter, когда значение оптимальное.
Псевдоэлемент ::-webkit-meter-suboptimum-value
Псевдоэлемент ::-webkit-meter-suboptimum-value используется для изменения стиля шкалы элемента meter, когда значение близко к оптимальному.
Псевдоэлемент ::after
Псевдоэлемент, который используется для вывода желаемого контента после содержимого элемента, к которому он добавляется.
Псевдоэлемент ::backdrop
Псевдоэлемент отображается ниже самого верхнего элемента в стеке по оси Z, но выше всех остальных элементов на странице, если они имеются. Обычно применяется для затемнения страницы, чтобы акцентировать внимание на фотографии или диалоговом окне, которые выводятся поверх такого затемнения.
Псевдоэлемент ::before
Применяется для отображения контента до содержимого элемента, к которому он добавляется.
Псевдоэлемент ::first-letter
Определяет стиль первого символа в тексте элемента, к которому добавляется.
Псевдоэлемент ::first-line
Задаёт стиль первой строки форматированного текста.
Псевдоэлемент ::marker
Позволяет устанавливать вид маркера через свойство content, а также управлять стилем маркера, например, менять его цвет или параметры шрифта.
Псевдоэлемент ::placeholder
Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder.
Псевдоэлемент ::selection
Применяет стиль к выделенному пользователем фрагменту текста.
Справочник CSS
- !important
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::marker
- ::placeholder
- ::selection
- :active
- :blank
- :checked
- :default
- :dir
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :focus-within
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited
- @charset
- @document
- @font-face
- @import
- @keyframes
- @media
- @page
- @supports
- @viewport
- accent-color
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- aspect-ratio
- backdrop-filter
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- caption-side
- caret-color
- clear
- clip
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-kerning
- font-size
- font-stretch
- font-style
- font-variant
- font-weight
- height
- hyphenate-character
- hyphenate-limit-chars
- hyphens
- image-rendering
- justify-content
- left
- letter-spacing
- line-clamp
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marks
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- perspective
- perspective-origin
- place-content
- pointer-events
- position
- quotes
- resize
- right
- scroll-behavior
- tab-size
- table-layout
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip-ink
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-fill-color
- text-indent
- text-orientation
- text-overflow
- text-shadow
- text-stroke
- text-stroke-color
- text-stroke-width
- text-transform
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- user-select
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- zoom
Псевдоэлементы
Вы не создавали этот элемент? А он есть! Всё благодаря CSS.
Время чтения: 6 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Егор Левченко ,
- Светлана Коробцева
Обновлено 8 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Псевдоэлементы — это элементы, которых не существует в HTML-разметке. Они создаются и позиционируются исключительно при помощи CSS. Чаще всего используются для создания различных декоративных элементов (которые не несут содержательного смысла).
Также псевдоэлементы приходят на помощь, когда нужно наложить поверх картинки так называемый оверлей (перекрывающий слой). На этом польза от псевдоэлементов не заканчивается.
Пример
Скопировать ссылку «Пример» Скопировано
Самый частый сценарий использования псевдоэлемента — наложение оверлея, полупрозрачной заливки поверх картинки. Чаще всего это требуется на первом экране, но этим способом можно наложить оверлей на любое изображение на сайте.
Good evening, Clarice.
header class="header"> h1 class="header__title">Good evening, Clarice.h1> header>
.header background: #999999 url("background.svg") no-repeat center / cover;> .header__title color: #ffffff; font-size: 82px; text-transform: uppercase; text-align: center;>.header background: #999999 url("background.svg") no-repeat center / cover; > .header__title color: #ffffff; font-size: 82px; text-transform: uppercase; text-align: center; >
Если выделить текст в этом примере, то станет видно, что фон выделения ярко-красного цвета.
: : placeholder
Скопировать ссылку «::placeholder» Скопировано
Он позволяет стилизовать подсказку, которая выводится в поле ввода текста ( ).
Текст подсказки задаётся при помощи атрибута placeholder у тега .
input type="email" placeholder="test@example.com">
По умолчанию цвет текста подсказки серый. Но иногда по дизайну требуется другой цвет.
Используйте псевдоэлемент : : placeholder и задайте нужные стили для подсказки. Можно изменить всё, вплоть до шрифта. При этом стили текста, который будет вводить пользователь, не будут затронуты.
input::placeholder color: #2E9AFF;>input::placeholder color: #2E9AFF; >
: : marker
Скопировать ссылку "::marker" Скопировано
: : marker — псевдоэлемент, отвечающий за маркерное поле. В нём находятся, например, маркеры списка.
Подсказки
Скопировать ссылку "Подсказки" Скопировано
�� Обязательно проверяйте поддержку псевдоэлемента в нужных браузерах. Для этого можно использовать сайт Can I use.
�� Для свойства content есть несколько полезных трюков. Например, можно с помощью data-атрибута у тега (которому можно задать значение при помощи JavaScript) и значения attr ( data - атрибут ) вывести количество непрочитанных сообщений на лейбле. Или количество товаров в корзине. Такой способ будет «дешевле» в том плане, что реальная HTML-разметка не изменяется.
�� В качестве значения свойства content можно вставлять юникод. Например, можно добавить символ копирайта при помощи записи content : "& # 169;" .
�� Можно встретить в коде написание псевдоэлементов с одним двоеточием в начале. Такой синтаксис допустим почти всегда, кроме как с псевдоэлементами : : selection и : : placeholder . Но в последних редакциях спецификации рекомендуется писать все псевдоэлементы с двумя двоеточиями, чтобы визуально отделить их от псевдоклассов.
На практике
Скопировать ссылку "На практике" Скопировано
Андрей Пилюгин советует
Скопировать ссылку "Андрей Пилюгин советует" Скопировано
�� Так как псевдоэлементы : : before и : : after отсутствуют в дереве DOM, то невозможно на них повесить JavaScript-событие. В большинстве случаев достаточно отслеживать события на самом элементе и через него менять свойства псевдоэлемента. Если необходимо отследить, например, клик именно по псевдоэлементу, то можно использовать хак со сравнением offset X .
Например, создадим управляющий контрол, позволяющий менять количество товаров в корзине. При этом кнопки «+» и «-» у нас будут псевдоэлементами.
️ Это демонстрационный пример. В реальной жизни лучше так не делать. Используйте подходящие HTML-теги.
0span class="quantity-change">0span>
Зададим стили для поля ввода:
.quantity-change display: flex; align-items: center; justify-content: space-between; width: 160px; height: 44px; border-radius: 6px; background-color: #2E9AFF; color: #000000; font-size: 24px; cursor: text; user-select: none;>.quantity-change display: flex; align-items: center; justify-content: space-between; width: 160px; height: 44px; border-radius: 6px; background-color: #2E9AFF; color: #000000; font-size: 24px; cursor: text; user-select: none; >
Для данного хака нужно внимательно следить за шириной элемента, так как событие будет вычисляться именно по ширине. В данном случае ширина элемента 160 px.
Управляющие контролы (в роли которых у нас выступят : : before и : : after ) будут по 40 px:
.quantity-change::before, .quantity-change::after display: flex; align-items: center; justify-content: center; width: 40px; font-size: 34px; cursor: pointer;> .quantity-change::before content: '–';> .quantity-change::after content: '+';>.quantity-change::before, .quantity-change::after display: flex; align-items: center; justify-content: center; width: 40px; font-size: 34px; cursor: pointer; > .quantity-change::before content: '–'; > .quantity-change::after content: '+'; >
Теперь, зная ширину элементов и контролов, считаем, что нажатие первых 40 px является событием для : : before , а нажатие последних 40 px — для : : after :
const quantity = document.querySelector('.quantity-change')let counter = Number(quantity.textContent) quantity.addEventListener('click', (event) => if(event.offsetX 0) counter-- > else if(event.offsetX >= 120) counter++ > quantity.textContent = counter>)const quantity = document.querySelector('.quantity-change') let counter = Number(quantity.textContent) quantity.addEventListener('click', (event) => if(event.offsetX 40 && counter > 0) counter-- > else if(event.offsetX >= 120) counter++ > quantity.textContent = counter >)
Бинго! Теперь мы можем отследить нажатия на псевдоэлементы и выполнить нужные действия.
Данный метод стоит применять с осторожностью, с оглядкой на медиавыражения, которые могут изменить размеры элемента и всё сломать. Если есть возможность спроектировать свой код без связки «Псевдоэлементы + JavaScript», то это будет хорошим решением.
Алёна Батицкая советует
Скопировать ссылку "Алёна Батицкая советует" Скопировано
�� Очень интересный и полезный трюк — задавать кастомный счётчик спискам. Бывает необходимость добавить скобки после цифры вместо стандартной точки.
Для создания кастомного счётчика первым делом нужно сбросить стандартные маркеры списка:
.list list-style-type: none;>.list list-style-type: none; >
Теперь придумаем и пропишем имя нового счётчика. Имя счётчика будет использоваться дальше.
.list list-style-type: none; counter-reset: new-counter;>.list list-style-type: none; counter-reset: new-counter; >
Говорим браузеру, что считать нужно именно пункты списка:
.list__item counter-increment: new-counter;>.list__item counter-increment: new-counter; >
Теперь для каждого пункта списка прописываем псевдоэлемент : : before и запускаем кастомный счётчик, дополняя его нужными символами. В текущем случае в кавычках добавляем круглую скобку и пробел:
.list__item::before content: counter(new-counter) ") ";>.list__item::before content: counter(new-counter) ") "; >
Подобным образом можно менять стили маркеров как заблагорассудится.
�� Псевдоэлементы — лучшее, что придумали в CSS �� С ними жить и верстать гораздо проще. Уделите время и поищите интересные трюки и фишки, которые можно сделать при помощи псевдоэлементов.
Эти маленькие друзья верстальщика могут удивить вас своим могуществом.
Их возможности заслуживают отдельной статьи. Например, такой, которую написал Крис Койер: «A Whole Bunch of Amazing Stuff Pseudo Elements Can Do».