🧱 Суть
attr() – это CSS-функция, которая позволяет получить значение HTML-атрибута элемента и использовать его внутри стилей.
Синтаксис:
attr(название-атрибута)Например:
<div data-tooltip="Hello"></div>div::after {
content: attr(data-tooltip);
}Результат:
Hello📦 Проблема
1. Нельзя напрямую использовать HTML-данные в CSS
Например, есть атрибут:
<a href="https://example.com">
Site
</a>CSS не знает значение href без специального доступа.
2. Приходится дублировать данные
Без attr() пришлось бы писать:
<a href="https://example.com" data-url="https://example.com">
Site
</a>Одно и то же значение хранится дважды.
✅ Решение
Использовать:
attr()Она берёт значение существующего атрибута элемента.
💻 Код
Пример: вывод href при печати страницы
@media print {
a::after {
content: " [" attr(href) "]";
}
}HTML:
<a href="https://example.com">
Example
</a>При печати получится:
Example [https://example.com]Пример: создание простого tooltip
HTML:
<button data-tooltip="Сохранить">
💾
</button>CSS:
button::after {
content: attr(data-tooltip);
}CSS получает значение:
data-tooltip → "Сохранить"и вставляет его в псевдоэлемент.
Ограничения
attr() чаще всего используется вместе с:
content::before::after
Например:
.element::before {
content: attr(data-value);
}Для изменения обычных CSS-свойств (width, color и т.д.) поддержка ограничена.
🎯 Вывод
attr()позволяет получить значение HTML-атрибута в CSS- чаще всего используется с псевдоэлементами
- полезна для tooltip и печати ссылок
- помогает избежать дублирования данных
- работает только с уже существующими атрибутами