Функция attr в CSS. Сделайте атрибуты элемента видимыми на странице

Главная

База знаний

css

Функции в CSS

Функция attr в CSS. Полное руководство с примерами

25 апреля 2025

Автор

Дмитрий Нечаев

Функция attr() в CSS позволяет использовать значения атрибутов HTML-элементов для стилизации и отображения на веб-странице. Это может быть полезно для отображения дополнительных данных, таких как значения атрибутов data-*, заголовки, ссылки и многое другое. В данной статье мы подробно рассмотрим, как использовать функцию attr(), какие атрибуты можно сделать видимыми и приведем практические примеры.

Основные понятия

Что такое функция `attr()`?

Функция attr() в CSS используется для получения значения атрибута HTML-элемента и его вставки в содержимое элемента или в свойства стилей. Синтаксис функции выглядит следующим образом:

element::before {
    content: attr(attribute-name);
}

Применение функции `attr()`

Функция attr() чаще всего используется с псевдоэлементами ::before и ::after для вставки содержимого до или после элемента.

Примеры использования

Отображение значения атрибута

Рассмотрим пример, где мы отображаем значение атрибута data-info у элемента:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример attr()</title>
    <style>
        .info::before {
            content: attr(data-info);
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="info" data-info="Дополнительная информация">Основной контент</div>
</body>
</html>

В этом примере значение атрибута data-info отображается перед основным контентом элемента div.

Использование атрибута `title`

Вы можете использовать функцию attr() для отображения значения атрибута title:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример attr() с title</title>
    <style>
        .tooltip::after {
            content: attr(title);
            display: block;
            margin-top: 10px;
            font-style: italic;
            color: gray;
        }
    </style>
</head>
<body>
    <p class="tooltip" title="Подсказка">Наведите курсор на этот текст, чтобы увидеть подсказку.</p>
</body>
</html>

Здесь значение атрибута title отображается после текста элемента p.

Добавление единиц измерения

Вы также можете использовать attr() для добавления единиц измерения к числовым значениям:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример attr() с единицами измерения</title>
    <style>
        .measurement::after {
            content: attr(data-value) " " attr(data-unit);
        }
    </style>
</head>
<body>
    <p class="measurement" data-value="50" data-unit="кг">Вес:</p>
</body>
</html>

В этом примере значение атрибутов data-value и data-unit объединяются для отображения измерения веса.

Поддержка браузеров

Поддержка функции attr() в CSS может варьироваться в различных браузерах. На момент написания данной статьи функция attr() поддерживается большинством современных браузеров, включая:

Google Chrome
Mozilla Firefox
Safari
Microsoft Edge

Пример совместимости с браузерами

/* Общий стиль */
.element::before {
    content: attr(data-info);
    display: block;
    font-weight: bold;
}

Ограничения функции `attr()`

Важно отметить, что функция attr() в CSS имеет некоторые ограничения:

Только для псевдоэлементов ::before и ::after: На данный момент функция attr() может использоваться только с псевдоэлементами ::before и ::after для вставки содержимого. Она не может быть использована напрямую для изменения стилей элемента.
Статичность значений: Значения атрибутов, полученные с помощью attr(), не будут обновляться динамически, если атрибут изменится после первоначальной загрузки страницы. Для динамического обновления требуется JavaScript.
Ограниченное количество атрибутов: Не все атрибуты могут быть использованы с attr(). Например, некоторые специальные атрибуты могут не поддерживаться.

Заключение

Функция attr() в CSS предоставляет полезный инструмент для отображения значений атрибутов HTML-элементов на веб-странице. С помощью attr() можно создать более информативный и интерактивный интерфейс, улучшив пользовательский опыт. Следуйте приведенным выше примерам и рекомендациям, чтобы эффективно использовать attr() в своих проектах.