Кратко
СкопированоКогда мы в CSS добавляем : к селектору, для соответствующего элемента создаётся псевдоэлемент. Этот псевдоэлемент — его самый первый потомок, он идёт до внутреннего содержимого.
Пример
Скопировано
a::before { content: "♥";}
a::before {
content: "♥";
}
Как пишется
Скопировано
::before { /* Для CSS 3 */}:before { /* Для CSS 2 */}
::before {
/* Для CSS 3 */
}
:before {
/* Для CSS 2 */
}
💡 В CSS 3 версии ввели написание с двумя двоеточиями, чтобы отличать запись псевдоэлемента от псевдокласса. Но синтаксис с одним двоеточием также поддерживается современными браузерами.
Как понять
СкопированоПроще всего воспринимать псевдоэлемент : как дополнительный элемент в начале тега. Мы можем применить к нему любые стили.
Чаще всего псевдоэлемент используется для оформительских целей, либо позволяя добавить дополнительное содержимое перед текстом, либо выступая в роли дополнительного стилизованного блока.
По умолчанию псевдоэлемент : является строчным.
Самый простой пример использования : — добавление иконки перед важным текстом:
<div class="message"> <p class="warning">Внимание! Этот абзац является важным предупреждением!</p></div><div class="message"> <p class="info">Этот абзац является информационным.</p></div>
<div class="message">
<p class="warning">Внимание! Этот абзац является важным предупреждением!</p>
</div>
<div class="message">
<p class="info">Этот абзац является информационным.</p>
</div>
.warning::before { content: "⚠"; margin-right: 0.5em;}
.warning::before {
content: "⚠";
margin-right: 0.5em;
}
Подсказки
Скопировано💡 Не забывайте прописывать свойство content для псевдоэлемента :. Это самая частая ошибка, из-за которой псевдоэлемент не появляется на странице.
💡 Псевдоэлемент ведёт себя ровно так же, как любой другой элемент в разметке, подчиняется тем же свойствам и законам. Просто его нет в HTML.
На практике
Скопированосоветует
Скопировано🛠 Псевдоэлемент : очень часто используют для стилизации нестандартных маркеров списка:
<ul> <li>Сделать настоящее тату</li> <li>Посмотреть «Звездные войны»</li> <li>Научиться играть на укулеле</li> <li>Не бриться полгода</li> <li>Поучаствовать в чайной церемонии</li></ul>
<ul>
<li>Сделать настоящее тату</li>
<li>Посмотреть «Звездные войны»</li>
<li>Научиться играть на укулеле</li>
<li>Не бриться полгода</li>
<li>Поучаствовать в чайной церемонии</li>
</ul>
li::before { content: "💜"; margin-right: 5px;}
li::before {
content: "💜";
margin-right: 5px;
}
🛠 Пример с пустым свойством content:
<ul> <li>Милый маленький грибочек</li> <li>Сколопендровый листочек</li> <li>Жёлтой пыльки чуть</li></ul>
<ul>
<li>Милый маленький грибочек</li>
<li>Сколопендровый листочек</li>
<li>Жёлтой пыльки чуть</li>
</ul>
li { position: relative; padding-left: 25px;}li::before { /* Не забываем о свойстве content */ content: ""; width: 14px; height: 14px; background-color: #2E9AFF; position: absolute; left: 0; top: 5px;}
li {
position: relative;
padding-left: 25px;
}
li::before {
/* Не забываем о свойстве content */
content: "";
width: 14px;
height: 14px;
background-color: #2E9AFF;
position: absolute;
left: 0;
top: 5px;
}