Особенностью атрибутов данных HTML является то, что их значения могут быть напрямую отображены через CSS. Всякий раз, когда содержимое на странице изменяется, обычным процессом является показ измененного содержимого через Javascript с добавление нового HTML.
Но это может быть альтернативно сделано с использованием атрибутов данных в CSS, где всякий раз, когда значение атрибута данных изменяется, новое значение автоматически отображается на странице.
Атрибуты данных в CSS
Данные-атрибуты могут быть прочитаны в CSS с помощью свойства content, где содержание свойства CSS можно использовать только ::before и ::after псевдо-элементов.
HTML
Код
<div id="container" data-point="14">Сообщение 1</div>
CSS
Код
/* содержимое псевдоэлемента будет установлено в текущее значение "data-point" */
#container::before {
content: attr(data-point);
}
В приведенном выше примере, когда значение data-point изменяется, отображаемое содержимое #container::before будет изменено на новое значение атрибута.
Вы также можете установить определенные свойства CSS, когда значение атрибута данных равно конкретному значению.
Код
/* содержимое псевдоэлемента будет установлено на текущее значение "data-point" */
#container::before {
content: attr(data-point);
}
/* установите цвет псевдоэлемента на красный data-point=50 */
#container[data-point="50"]::before {
color: red;
}
