attr

attr — CSS-функция, которая извлекает значение HTML-атрибута элемента для использования в CSS. На данный момент надёжно работает только в свойстве content псевдоэлементов.

Зачем нужно

attr позволяет отображать значения HTML-атрибутов через CSS, без JavaScript. Это полезно для тултипов, data-атрибутов, отображения ссылок при печати и создания декоративных элементов на основе данных из HTML.

Где используется

  • Отображение data-* атрибутов через ::before / ::after
  • CSS-тултипы (значение из data-tooltip)
  • Показ URL ссылок при печати
  • Счётчики и метки на основе атрибутов

Предпосылки

  • Селекторы — псевдоэлементы ::before, ::after
  • HTML-атрибуты data-*

Базовый синтаксис

/* Отобразить значение атрибута title */
.element::after {
  content: attr(title);
}

/* Отобразить data-атрибут */
.badge::before {
  content: attr(data-count);
}

Практические примеры

Тултип через data-атрибут

<button class="tooltip-btn" data-tooltip="Сохранить документ">
  Сохранить
</button>

.tooltip-btn {
  position: relative;
}

.tooltip-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: #333;
  color: white;
  font-size: 0.8rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.tooltip-btn:hover::after {
  opacity: 1;
}

Показ URL при печати

@media print {
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* Не показывать для внутренних ссылок */
  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: "";
  }
}

Бейдж с числом

<span class="notification" data-count="5">Уведомления</span>

.notification {
  position: relative;
}

.notification::after {
  content: attr(data-count);
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  background: #dc3545;
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

/* Скрыть если пусто */
.notification[data-count="0"]::after,
.notification:not([data-count])::after {
  display: none;
}

Декоративные метки

<div class="card" data-tag="Новинка">
  <h3>Товар</h3>
</div>

.card[data-tag]::before {
  content: attr(data-tag);
  display: inline-block;
  padding: 4px 10px;
  background: #ffd700;
  color: #333;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  margin-bottom: 8px;
}

Нумерация шагов

<ol class="steps">
  <li data-step="1">Зарегистрируйтесь</li>
  <li data-step="2">Подтвердите email</li>
  <li data-step="3">Начните работу</li>
</ol>

.steps li::before {
  content: "Шаг " attr(data-step);
  display: block;
  font-size: 0.75rem;
  color: #007bff;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px;
}

Расширенный attr (Level 4) — пока ограничена поддержка

CSS Values Level 5 расширяет attr для использования в любых свойствах:

/* Пока НЕ поддерживается браузерами */
.element {
  /* attr(name type, fallback) */
  width: attr(data-width px, 100px);
  color: attr(data-color color, black);
  background: attr(data-bg color, white);
}

Расширенный attr (за пределами content) имеет очень ограниченную поддержку. Для таких случаев используйте CSS-переменные через style="".

Альтернатива через inline CSS-переменные

<div class="bar" style="--progress: 75%;">75%</div>

.bar {
  width: var(--progress);
  background: #007bff;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
}

Частые ошибки

  1. attr вне content — не работает в большинстве браузеров:
    /* НЕ сработает */
.element { width: attr(data-width); }
/* Используйте inline CSS-переменные вместо этого */
  2. attr без content — для ::before/::after всегда нужен content:
    /* ОШИБКА — ::after не появится */
.element::after { color: red; }
/* ПРАВИЛЬНО */
.element::after { content: attr(data-label); color: red; }
  3. Значение атрибута содержит HTML — attr вставляет как текст, не как HTML
  4. Пробелы в имени атрибута — attr(data - name) невалидно

Практика

  • Создать CSS-тултип через data-tooltip и attr
  • Добавить отображение URL при печати через @media print
  • Сделать бейдж с числом из data-count
  • Создать декоративные метки для карточек
  • Попробовать альтернативу через inline CSS-переменные

Связанные темы

Ресурсы