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

Спецификации¶

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

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

Пример¶

HTML

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

CSS

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