Псевдоэлементы. МДН
Значения атрибутов ХТМЛ‑элемента можно передавать в псевдоэлементы ЦСС.
Псевдоэлементы. МДН
Селектор [data‑badge] создаст псевдоэлемент для элементов с атрибутом data‑badge. Можно использовать и селекторы без привязки к атрибуту.
Например, так удобно верстать таблетки со счётчиком или текстом:
Селектор [data‑badge] создаст псевдоэлемент для элементов с атрибутом data‑badge. Можно использовать и селекторы без привязки к атрибуту.
<style>
[data-badge]::after {
content: attr(data-badge);
font-family: Helvetica, sans-serif;
font-size: 13px;
padding: 2px 6px;
background: #e30016;
color: #fff;
border-radius: 6px;
margin-left: 4px;
}
</style>
<span data-badge="2">Сообщения</span>
<span data-badge="New!">Друзья</span>
Можно комбинировать значение атрибута с текстом:
[data-badge]::after {
content: '+ ' attr(data-badge) '♥';
}
Удобно изменять или убирать атрибут из Яваскрипта:
$('.js__messages').attr('data-badge', 2)
$('.js__messages').removeAttr('data-badge')
Этот трюк — не повседневная техника вёрстки, а исключительный приём. Иногда он может облегчить жизнь разработчику, но использовать его для всего подряд не стоит.
Помните о главных ограничениях псевдоэлемента: он не кликабелен отдельно от родителя, не может содержать ХТМЛ‑разметку, его содержимое не распознаётся поисковиками и скринридерами.
Если вам нужен кликабельный элемент, разметка внутри или важна хорошая индексация в поисковиках, лучше использовать не псевдоэлемент, а отдельный тег.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.