Школа
Веб-разработка

Трюк с псевдоэлементом. Верстаем таблетку со счётчиком

23 июня 2022
👁 3851   🗩3
Веб-разработка

Трюк с псевдоэлементом. Верстаем таблетку со счётчиком

23 июня 2022
👁 3851   🗩3
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 8
8
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

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

Веб‑разработка
Полезно
 8
8
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Хочу добавить ещё одну особенность псевдоэлементов: их текст не копируется в буфер обмена. Иногда это можно использовать в плюс.

Возможно, стоит добавить, что функция attr поддерживается только для атрибута content, для остальных данные передать не получиться
https://caniuse.com/css-gencontent
https://caniuse.com/css3-attr

Михаил Воробьев

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

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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