Кратко
СкопированоКогда мы в CSS добавляем : к селектору, для соответствующего элемента создаётся псевдоэлемент. Этот псевдоэлемент — его самый последний потомок, он идёт после всего внутреннего содержимого.
Пример
Скопировано
a::after { content: "→";}
a::after {
content: "→";
}
Как пишется
Скопировано
::after { /* Для CSS 3 */}:after { /* Для CSS 2 */}
::after {
/* Для CSS 3 */
}
:after {
/* Для CSS 2 */
}
💡 В CSS 3 ввели написание с двумя двоеточиями, чтобы отличать запись псевдоэлемента от псевдокласса. Но синтаксис с одним двоеточием также поддерживается современными браузерами.
Как понять
СкопированоПроще всего воспринимать псевдоэлемент : как дополнительный элемент в конце тега. Мы можем применить к нему любые стили.
Чаще всего псевдоэлемент используется для оформительских целей, либо позволяя добавить дополнительное содержимое после текста, либо выступая в роли дополнительного стилизованного блока.
По умолчанию псевдоэлемент : является инлайновым.
Самый простой пример использования : вместе с : — оформление текстового содержимого:
<article> <h1> «Все берут в горсть и нюхают: ааа… гру-шовка!»: вспоминаем, как писали об <span class="accent">ароматах</span> классики </h1> <p>«Все кидаются в лопухи, в крапиву...»</p> <p>«Лето Господне», Иван Шмелёв</p></article>
<article>
<h1>
«Все берут в горсть и нюхают: ааа… гру-шовка!»: вспоминаем, как писали об
<span class="accent">ароматах</span> классики
</h1>
<p>«Все кидаются в лопухи, в крапиву...»</p>
<p>«Лето Господне», Иван Шмелёв</p>
</article>
.accent::before,.accent::after { content: "🌸"; vertical-align: middle; font-size: 0.6em;}.accent::before { margin-right: 0.1em;}.accent::after { margin-left: 0.1em;}
.accent::before,
.accent::after {
content: "🌸";
vertical-align: middle;
font-size: 0.6em;
}
.accent::before {
margin-right: 0.1em;
}
.accent::after {
margin-left: 0.1em;
}
Подсказки
Скопировано💡 Не забывайте прописывать свойство content для псевдоэлемента :. Это самая частая ошибка, из-за которой псевдоэлемент не появляется на странице.
На практике
Скопированосоветует
Скопировано🛠 Псевдоэлементы : и : можно использовать и для более сложной стилизации:
<a href="#" class="link">выбери меня</a>
<a href="#" class="link">выбери меня</a>
.link { position: relative;}.link::before,.link::after { content: ""; height: 14px; width: 14px; position: absolute; transition: all 0.6s;}.link::before { top: 0; left: 0; border-top: 6px solid #000000; border-left: 6px solid #000000;}.link::after { bottom: 0; right: 0; border-bottom: 6px solid #000000; border-right: 6px solid #000000;}.link:hover::before,.link:hover::after { width: 100%; height: 100%; transition: all 0.3s;}
.link {
position: relative;
}
.link::before,
.link::after {
content: "";
height: 14px;
width: 14px;
position: absolute;
transition: all 0.6s;
}
.link::before {
top: 0;
left: 0;
border-top: 6px solid #000000;
border-left: 6px solid #000000;
}
.link::after {
bottom: 0;
right: 0;
border-bottom: 6px solid #000000;
border-right: 6px solid #000000;
}
.link:hover::before,
.link:hover::after {
width: 100%;
height: 100%;
transition: all 0.3s;
}
В этом примере рамки применены к псевдоэлементам : и :. При этом сами псевдоэлементы используются как два дополнительных стилизуемых элемента внутри ссылки <a>. Круто, правда? В HTML пишем один тег, а по факту можем стилизовать аж три! 🤘
советует
Скопировано🛠 Псевдоэлемент : можно использовать и для того, чтобы вывести важную информацию во время печати. Например, содержимое ссылок, которые есть на странице:
<a href="https://doka.guide/css/pseudoelements/">Узнать больше про псевдоэлементы в Доке</a>
<a href="https://doka.guide/css/pseudoelements/">Узнать больше про псевдоэлементы в Доке</a>
@media print { a { text-decoration: none; } a::after { content: " (ссылка: " attr(href) ")"; }}
@media print {
a {
text-decoration: none;
}
a::after {
content: " (ссылка: " attr(href) ")";
}
}
Тогда на печати мы получим следующее:
советует
Скопировано🛠 У псевдоэлемента : с символами или графикой в content может быть альтернативное описание. Добавьте его через косую черту (/) после основного значения. Видимый текст не изменится, но для вспомогательных технологий и браузеров описание попадёт в название элемента.
Опишем знак дополнительной информации «ⓘ»:
span::after { content: "ⓘ" / "дополнительная информация";}
span::after {
content: "ⓘ" / "дополнительная информация";
}
Конечно, важные для смысла элементы стоит добавлять через HTML, а не CSS. Если такой возможности нет, используйте дополнительный синтаксис у content с умом. Обычно это ситуации, когда скринридеры не знакомы с символом или не могут озвучить иконку из :. Например, они никак не опишут символ «ⓘ» или озвучат из чего он состоит: «Маленькая буква „i“ внутри круга».
Альтернативное описание в content лучше вообще не задавать ссылкам и другим интерактивным элементам. Дело в том, что о нём не узнают пользователи голосового управления. Разберём на примере:
<a href="#"> Условия использования</a>
<a href="#">
Условия использования
</a>
/* Не делайте так ❌ */a::after { content: "🔗" / "открыть в новом окне";}
/* Не делайте так ❌ */
a::after {
content: "🔗" / "открыть в новом окне";
}
Браузеры и скринридеры решат, что ссылка называется «Условия использования открыть в новом окне». Пользователи голосового управления увидят только «Условия использования». Ничего не произойдёт, когда они попробуют перейти по ссылке командой «Условия использования, клик».
Читайте также
-
:: before Удобный способ создать элемент без дополнительной HTML-разметки.