CSS ::before — вміст перед елементом

Псевдоелемент ::before створює вміст НА ПОЧАТКУ елемента — усередині нього, перед справжнім вмістом.

правити

Загальний опис

правити

Нотатка

Використовуйте властивість content для визначення вмісту, що буде додано.

автор: NagarD правити

Нотатка

Щоб додати текст в кінці змісту елемента, використовуйте селектор ::after.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

::before {


    css declarations;


}

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1.5	4	7	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	3

Приклади

+ запропонувати свій приклад у пісочниці

<ul class="checks">
    <li>Перший пункт</li>
    <li>Другий пункт</li>
</ul>

<blockquote class="quote">Стилі створюють вміст, якого немає в розмітці.</blockquote>

body { font: 16px/1.5 system-ui, sans-serif; }

.checks {
    list-style: none;
    padding: 0;
}

.checks li::before {
    content: "✔";
    margin-right: .5rem;
    color: #16a34a;
}

.quote {
    margin: 1rem 0 0;
    padding-left: 1rem;
    border-left: 3px solid #cbd5e1;
    font-style: italic;
}

.quote::before {
    content: "«";
    font-size: 1.6rem;
    color: #94a3b8;
}

<p>перший абзац</p>
<p>другий абзац</p>

p::before {
    content: "Прочитай це: ";
}

<p>перший абзац</p>
<p>другий абзац</p>

p::before {
    content: "Прочитай це — ";
    background-color: yellow;
    color: red;
    font-weight: bold;
}