Как сделать бейдж или метку
Короткий ответ
Метка — это span с фоном, отступами и скруглением:
<style>
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; vertical-align: middle; }
</style>
<h3>Wireless mouse <span class="badge" style="background: crimson; color: white;">New</span></h3>
<span class="badge" style="background: honeydew; color: seagreen;">In stock</span>
<span class="badge" style="background: lightyellow; color: darkgoldenrod;">-20%</span>Счётчик на кнопке
Число уведомлений в углу кнопки: кнопке — position: relative, счётчику — absolute:
<style>
.bell { position: relative; margin: 12px; padding: 8px 14px; }
.count { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
border-radius: 10px; background: crimson; color: white; font-size: 12px; line-height: 20px; }
</style>
<button class="bell">Inbox <span class="count">7</span></button>
<button class="bell">Cart <span class="count">12</span></button>min-width и padding вместо фиксированной ширины позволяют кружку растягиваться в овал для двузначных чисел.
Для экранных дикторов
«Inbox 7» понятно глазами, но не на слух. Добавьте скрытый поясняющий текст или aria-label у кнопки, например «Inbox, 7 unread».
Частая ошибка
Метки различаются только цветом: зелёная — «есть», красная — «нет». Люди с нарушением цветового зрения их не отличат. Пишите в метке слово, а цвет оставьте как дополнительную подсказку.
Функции из этого ответа
- <span> — Строчный контейнер без смысла: нужен, чтобы оформить часть текста.
- border-radius — Скругляет углы элемента.
- position — Как позиционируется элемент: в обычном потоке или по смещениям.