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

Псевдоэлемент ::before - это элемент сформированного контента, который добавляет содержимое любого вида перед контентом.

Значение определяется с помощью свойства content.

По умолчанию псевдоэлемент ::before становится строчным.

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

Он может быть анимирован, позиционирован и выровнен подобно другим контентам.

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

Версия

CSS2

Синтаксис

::before {
css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p::before { 
      content: "  William Shakespeare -";
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора ::before</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

В следующем примере к контенту могут быть добавлены стили:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p::before { 
      content: "William Shakespeare-";
      background-color: #ccc;
      color: #666;
      border: 2px dotted #000;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора ::before</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

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

4.0+ 12.0+ 2.0+ 3.1+ 10.0+




Похожие статьи