Псевдоэлемент CSS ::before

Определение и использование

CSS ::before Псевдоэлементы используются для вставки содержимого перед содержимым указанного элемента.

Использование content Свойство content определяет содержимое, которое нужно вставить. Значение content может быть:

• Строка: content: "Hello world!";
• Изображение: content: url(myimage.jpg);
• Без содержимого: content: none;
• Счетчики: content: counter(li);
• Цитаты: content: open-quote;
• Значение свойства: content: " (" attr(href) ")";

Совет:Обратите внимание, что вставляемое содержимое все еще находится внутри указанного элемента. Вставляемое содержимое добавляется перед другим содержимым внутри элемента.

Использование ::after Вставьте некоторые содержимое после содержимого определенного элемента.

Пример

Пример 1

Вставьте строку перед содержимым каждого элемента <p>:

p::before {
  content: "Read this: ";
}

Попробуйте сами

Пример 2

Вставьте строку перед содержимым каждого элемента <p> и установите стиль вставляемого содержимого:

p::before {
  content: "Read this -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Попробуйте сами

Грамматика CSS

::before {
  css declarations;
}

Технические детали

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

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот псевдоэлемент.

Связанные страницы

Урок:Псевдоэлемент CSS

См. также:Псевдоэлемент CSS ::after