Перейти к содержанию

::before

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

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

Псевдо-элементы

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/* 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.

Пример

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

1
2
3
4
5
6
7
8
q::before {
  content: '«';
  color: blue;
}
q::after {
  content: '»';
  color: red;
}

Комментарии