::before CSS

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

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

Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Поддержка браузерами:

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

Синтаксис

/* CSS3 синтаксис */
element::before { свойства }

/* CSS2 устаревший синтаксис (нужен только для поддержки IE8) */
element:before  { свойства }

/* добавляет контент "Hello world!" перед каждым элементом <p> */
p::before { content: "Hello world!"; }

Запись ::before (с двумя двоеточиями) была введена в CSS3 для разделения между псевдо-классами и псевдо-элементами. Браузеры также поддерживают устаревшую запись :before (с одним двоеточием) из стандарта CSS 2.

Примеры

HTML

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

CSS

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