В css не работает attr(data-count number) с указанием типа

Question

Пытаюсь вывести значение атрибута data-count через css функцию attr()

p:before {
  content: attr(data-count);
}

p:after {
  content: attr(data-count number);
}

<p data-count="555"></p>

Почему с указанием типа не отражается, а в средствах разработчика некорректное значение свойства?

Answer 1

Свойство content может принимать в качестве значения только строки.

Поэтому в первом случае работает (по умолчанию attr возвращает строку), а во втором случае - нет (явно указано вернуть тип number).

На текущий момент числа невозможно вставить в content напрямую, однако возможно использовать counter для преобразований, например:

p:before {
  content: "prev " attr(data-count) ".";
}

p:after {
  counter-set: c calc(attr(data-count number) * 10);
  content: " after: " counter(c);
}

<p data-count="555"></p>

БЛОГ НА HUSL

В css не работает attr(data-count number) с указанием типа

Ответы (1 шт):