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

Значение и применение

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

Обратите внимание, что в настоящее время используется синтаксис, который предусматривает двойное двоеточие перед псевдоэлементом. Не смотря на то, что браузеры поддерживают оба варианта, рекомендуется использовать синтаксис CSS 3:

CSS

/* синтаксис CSS 3 */
селектор::псевдоэлемент {  /* двойное двоеточие */
CSS свойство: значение;
}
/* синтаксис CSS 2 */ 
селектор:псевдоэлемент { /* одинарное двоеточие */
CSS свойство: значение;
}

Попробуйте псевдоэлемент ::before

Меняйте содержимое перед текстом. Это псевдоэлемент, а не отдельный узел HTML.

Вариант оформленияМетка.sample::before { content: "Новое: "; color: #994000; font-weight: bold; }Символ.sample::before { content: "★ "; color: #994000; }Без содержимого.sample::before { content: none; }

CSS

.sample::before { content: "Новое: "; color: #994000; font-weight: bold; }

HTML примера

HTML

<p class="sample">Учебная карточка</p>

Псевдоэлемент создаётся при подходящем значении content, в том числе пустой строке "", но не при none или обычном для него normal. Важный текст сохраняйте в HTML: сгенерированное содержимое не заменяет доступную разметку. Для декора загруженного <img> используйте обёртку; на псевдоэлементы полей <input> нельзя полагаться одинаково во всех браузерах.

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

Спецификация: CSS pseudo

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьcss.selectors.before
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`before`	✓1	✓12	✓1.5	✓7	✓4	✓18	✓4	✓10.1	✓3	✓1.0	✓4.4	✓3
Animation and transition support	✓26	✓12	✓4	✓15	✓7	✓26	✓4	✓14	✓7	✓1.5	✓4.4	✓7
::before::marker nested pseudo-elements	✓135	✓135	✓143	✓120	×	✓135	✓143	✓89	×	✓29.0	✓135	×

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

::before {
content: " ";
блок объявлений;
}

Версия CSS

CSS2

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

Содержимое ::before

Измените content. Дополнительный текст создаётся CSS, а исходный текст остаётся в HTML.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #24364b;
    overflow-wrap: anywhere;
}
section {
    margin-block: 16px;
    padding: 12px;
    border: 1px solid #a8b8c7;
}
p {
    padding: 8px;
}
label {
    display: block;
    margin-block: 12px;
}
input,
button {
    max-width: 100%;
    font: inherit;
    padding: 8px;
}
input[type='checkbox'] + label {
    display: inline;
}
a {
    color: #135fb5;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Содержимое ::before</title>
  </head>
  <body>
    <p class="note" data-label="Подсказка">Текст сообщения</p>
    <p>Обычный абзац</p>
  </body>
</html>

style.css

CSS

.note::before {
    content: attr(data-label) ' — ';
    color: #9b3c00;
    font-weight: bold;
}

Пример счетчиков в CSS: попробуйте сами

Измените учебный CSS и сравните оформление добавленного содержимого.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Автоматическая нумерация</title>
  </head>
  <body>
    <div class="chapters">
      <h3 class="sample">Введение</h3>
      <h3 class="sample">Разметка</h3>
      <h3 class="sample">Стили</h3>
    </div>
  </body>
</html>

style.css

CSS

.chapters {
    counter-reset: chapter;
}
.sample::before {
    counter-increment: chapter;
    content: counter(chapter) '. ';
}

Пример добавления кавычек к тексту в CSS: попробуйте сами

Измените учебный CSS и сравните оформление добавленного содержимого.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Внешние и вложенные кавычки</title>
  </head>
  <body>
    <p class="sample">
      <q>Цитата с <q>вложенной цитатой</q> внутри</q>
    </p>
  </body>
</html>

style.css

CSS

.sample {
    quotes: '«' '»' '‹' '›';
}
q::before {
    content: open-quote;
}
q::after {
    content: close-quote;
}