Функция attr()
Описание
Функция применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета.
Синтаксис
attr(атрибут тип значение)Дополнительно
| Значение | Описание |
| атрибут | Имя атрибута элемента передаваемое в CSS. |
| тип | Тип значения свойства CSS. Допустимы следующие ключевые слова: string (строки), color (цвет), url (веб-адрес), integer (целое число), number (вещественное число), angle (угол), time (время), deg (градус), а также единицы CSS вроде em, px и др. |
| значение | Значение, которое будет использоваться в том случае, если атрибута нет или браузер не может его получить. |
Между версиями CSS есть небольшая разница по прочтению некоторых особенностей attr(). В CSS2.1 функция attr() может использоваться только совместно со свойством content и всегда возвращает строку в качестве значения. В CSS3 attr() допустимо применять с любым свойством и возвращаемое значение может быть в любом корректном для CSS3 формате.
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.site::after {
content: ' (' attr(href) ') ';
background: rgba(22, 137, 213, 0.542);
color: rgb(255, 0, 0);
}
</style>
<p><a href='https://gki-webik.ru' class='site'>Полезный сайт</a></p>
</body>
</html>Читайте также
Стиль посещенных ссылок
Псевдокласс :visited применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилевое оформление....
Свойство text-emphasis
Сокращённое свойство, позволяющее установить значения свойств text-emphasis-style и text-emphasis-color одновременно....
Свойство font-style
Определяет начертание шрифта — обычное, курсивное или наклонное.
Когда для текста установлено курсивное или наклонное начертание, браузер обращ...
Свойство grid-column-end
Определяет местоположение в сетке ссылаясь на конкретные линии.
grid-column-end / grid-row-end — это линия на которой элемент заканчивается....