::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)

Поддержка браузерами

Can I Use css-gencontent? Data on support for the css-gencontent feature across the major browsers from caniuse.com.

Пример

HTMLCSS

<q>Some quotes</q>, he said, <q>are better than none</q>.

q::before {
  content: '«';
  color: blue;
}
q::after {
  content: '»';
  color: red;
}

Комментарии