attr()

Общие сведения

Например, attr(X) возвращает значение атрибута X указанного в элементе. Если у элемента нет атрибута X, то вернётся пустая строка. Для примера, у ссылок <a> есть атрибут href, который определяет местоположение на которое указывает ссылка. С помощью свойства content и функции attr() вы можете получить значение URL указанное в атрибуте href, что довольно эффективно. Это можно использовать в стилях для печатной версии страницы, чтобы вывести URL-адрес страницы на которую указывает ссылка, сразу за её содержимым (с помощью псевдоэлемента ::after). Например:

@media print {
  a[href]::after {
    content: attr(href);
  }
}

В примере выше CSS правило выбирает все ссылки с атрибутом href (с помощью селекторов атрибутов), извлекает значение атрибута href с помощью функции attr(), а затем использует его в качестве контента для псевдоэлемента ::after, который добавляет полученное значение к ссылкам.

Функция attr() может получать значения из любых атрибутов элемента, включая кастомные data-атрибуты из HTML5. Например:

<li data-label="todo">Купить молоко!</li>

li::before {
  content: attr(data-label);
}

Поддержка браузерами

attr() поддерживается всеми основными браузерами: Chrome, Firefox, Safari, Opera, IE, и на Android и на iOS.

Пример

Ниже показан пример использования функции attr():