skip to main content

::before

css

Кратко 🔗

Когда мы в CSS приписываем ::before к селектору, то для соответствующего элемента создаётся псевдоэлемент (Псевдоэлементы), который будет являться его самым первым потомком. То есть, прямо совсем самым первым, который находится ДО внутреннего содержимого.

Пример 🔗

a::before {
content: "♥";
}

Как пишется 🔗

::before/* Для CSS 3 */

: before; /* Для CSS 2 */

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

Как это понять 🔗

Проще всего воспринимать псевдоэлемент ::before как дополнительный элемент в начале тега. Мы можем применить к нему любые стили.

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

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

Самый простой пример использования ::before — добавление иконки перед важным текстом:

HTML

<div class="message">
<p class="warning">Внимание! Этот абзац является важным предупреждением!</p>
</div>

<div class="message">
<p class="info">Этот абзац является информационным.</p>
</div>

CSS

.warning::before {
content: "⚠";
margin-right: 0.5em;
}

.info:before {
content: "ℹ️";
margin-right: 0.5em;
}

Подсказки 🔗

💡 Не забывайте прописывать свойство content для псевдоэлемента ::before. Это самая частая ошибка, из-за которой псевдоэлемент не появляется на странице.

💡 Псевдоэлемент ведёт себя ровно так же как любой другой элемент в разметке, подчиняется тем же свойствам и законом. Просто его нет в HTML.

В работе 🔗

Денис,

🛠 Псевдоэлемент ::before очень часто используют для стилизации нестандартных маркеров списка:

HTML

<ul>
<li>Сделать настоящее тату</li>
<li>Посмотреть «Звездные войны»</li>
<li>Научиться играть на укулеле</li>
<li>Не бриться полгода</li>
<li>Поучаствовать в чайной церемонии</li>
</ul>

CSS

li::before {
content: "💛";
margin-right: 5px;
vertical-align: middle;
}

🛠 Пример со свойством content:

HTML

<ul>
<li>Милый маленький грибочек</li>
<li>Сколопендровый листочек</li>
<li>Жёлтой пыльки чуть</li>
</ul>

CSS

li {
position: relative;
}

li:before {
/* не забываем о свойстве content */
content: "";
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #ed6742;
position: absolute;
left: -25px;
top: 5px;
}

Автор: Денис,