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

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

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

использование 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

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