::before¶
Псевдо-элемент ::before
является первым потомком соответствующего элемента.
Часто применяется для оформления дополнительным контентом content
родительского элемента. Этот элемент по умолчанию строковый.
Псевдо-элементы
- ::after
- ::backdrop
- ::before
::cue
- ::first-letter
- ::first-line
::grammar-error
::marker
::part()
- ::placeholder
- ::selection
::slotted()
::spelling-error
Синтаксис¶
/* CSS3 синтаксис */
element::before {
/* свойства */
}
/* CSS2 устаревший синтаксис (нужен только для поддержки IE8) */
element:before {
/* свойства */
}
/* добавляет контент "Hello world!" перед каждым элементом <p> */
p::before {
content: 'Hello world!';
}
Запись ::before
(с двумя двоеточиями) была введена в CSS3 для разделения между псевдо-классами и псевдо-элементами. Браузеры также поддерживают устаревшую запись :before
(с одним двоеточием) из стандарта CSS 2.
Спецификации¶
- CSS Pseudo-Elements Level 4
- CSS Transitions
- CSS Animations
- Selectors Level 3
- CSS Level 2 (Revision 1)
Поддержка браузерами¶
Пример¶
<q>Some quotes</q>, he said, <q>are better than none</q>.
q::before {
content: '«';
color: blue;
}
q::after {
content: '»';
color: red;
}