Псевдоэлементы
Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента.
Например, псевдоэлемент ::first-line может быть использован для изменения шрифта первой строки абзаца.
Примечание: В отличие от псевдоэлементов, псевдоклассы могут быть использованы для стилизации элемента на основе его состояния.
Синтаксис
В селекторе можно использовать только один псевдоэлемент. Он должен находиться после простых селекторов в выражении.
Примечание: Как правило, следует использовать двойное двоеточие (::) вместо одинарного (:). В этом состоит различие между псевдоклассами и псевдоэлементами. Однако, так как это различие не присутствовало в старых версиях спецификации W3C, большинство браузеров поддерживают оба синтаксиса для псевдоэлементов.
Список стандартных псевдоэлементов
Например, псевдоэлемент ::first-line может быть использован для изменения шрифта первой строки абзаца.
Код
/* Первая строка каждого элемента <p>. */
p::first-line {
color: blue;
text-transform: uppercase;
}
p::first-line {
color: blue;
text-transform: uppercase;
}
Примечание: В отличие от псевдоэлементов, псевдоклассы могут быть использованы для стилизации элемента на основе его состояния.
Синтаксис
Код
selector::pseudo-element {
property: value;
}
property: value;
}
В селекторе можно использовать только один псевдоэлемент. Он должен находиться после простых селекторов в выражении.
Примечание: Как правило, следует использовать двойное двоеточие (::) вместо одинарного (:). В этом состоит различие между псевдоклассами и псевдоэлементами. Однако, так как это различие не присутствовало в старых версиях спецификации W3C, большинство браузеров поддерживают оба синтаксиса для псевдоэлементов.
Список стандартных псевдоэлементов
::after
::before
::cue
::first-letter
::first-line
::selection
::slotted
::backdrop
::placeholder
::marker
::spelling-error
::grammar-error
::before
::cue
::first-letter
::first-line
::selection
::slotted
::backdrop
::placeholder
::marker
::spelling-error
::grammar-error
-D-I-N-I-S-
05.06.24 в 16:11
247
0
Источник