CSS :: Функция attr()

Функция attr() (от англ. attribute – атрибут) позволяет извлекать значение атрибута указанного элемента для дальнейшего использования его в таблице стилей.

На данный момент функция надежно работает только с css-свойством content, хотя в скором времени ее можно будет использовать и с другими свойствами.

Синтаксис

attr(<имя атрибута> <тип значения>? [, <значение по умолчанию>]?)

Значения

имя атрибута – имя требуемого атрибута.
тип значения – в качестве необязательного параметра можно передавать тип значения атрибута. При этом допустимы следующие ключевые слова: angle, color, deg, integer (целое число), number (вещественное число), string (используется по умолчанию), time, url. Также в качестве типа разрешается указывать размерности доступных в CSS единиц измерения (смотреть).
значение по умолчанию – в конце через запятую разрешается указывать необязательное значение по умолчанию, которое будет использовано, если атрибут у требуемого элемента будет отсутствовать или браузер не сможет получить его значение.

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css3-values/#funcdef-attr

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/attr

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		p::before{  
		content: attr(num)" ";  
		font-weight: bold;  
		}
	
	</style>
	
</head>
<body>

	<p num="1.">Первый пункт.</p>
	<p num="2.">Второй пункт.</p>
	<p num="3.">Третий пункт.</p>

</body>
</html>

Пример №1