::before

Псевдо-элемент ::before является первым потомком соответствующего элемента.

Часто применяется для оформления дополнительным контентом content родительского элемента. Этот элемент по умолчанию строковый.

Синтаксис

/* 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.

Пример

HTML

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

CSS

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