Урок 25 із 104
24%
← Назад

Атрибути елементів CSS

Вивчаємо CSS-функцію attr(), яка дозволяє отримувати значення атрибутів HTML-елементів і використовувати їх у стилях.

Атрибути елементів CSS

CSS-функція attr() дозволяє отримати значення HTML-атрибуту елемента та вставити його у властивість CSS через content.

Синтаксис attr()


.element::after {
  content: attr(data-text);
}

У цьому прикладі CSS бере значення атрибуту data-text і додає його після елемента.

Приклад використання


<p data-info="Додатковий текст">
  Основний текст
</p>

p::after {
  content: attr(data-info);
  color: gray;
}

<p>
  Перейти на
  <a href="https://example.com">
    сайт
  </a>
</p>

a:hover::after {
  content: attr(href);
  margin-left: 10px;
  color: gray;
}

При наведенні на посилання CSS бере значення атрибуту href і показує його поруч із текстом посилання.

❗ Важливо:

Функція attr() найчастіше використовується разом із псевдоелементами ::before та ::after.

Практичне завдання

📌 Завдання:
  1. №1. Є текст із посиланнями.
  2. №2. Додайте CSS, щоб при наведенні над посиланням з'являлася його адреса.
  3. №3. Використайте attr(href) та псевдоелемент ::after.

<!-- Початковий код -->

<p>
  Документація:
  <a href="https://developer.mozilla.org">
    MDN
  </a>
</p>

<p>
  Пошук:
  <a href="https://google.com">
    Google
  </a>
</p>
💡 Показати підказку

Для отримання адреси посилання використовуйте attr(href). Додавати текст потрібно через content у псевдоелементі.

✅ Показати відповідь

a:hover::after {
  content: " (" attr(href) ")";
  margin-left: 5px;
  color: gray;
}