Значения атрибутов ХТМЛ‑элемента можно передавать в псевдоэлементы ЦСС.

Селектор [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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы