Отображение атрибутов элемента

Атрибуты элемента могут отображаться в псевдоэлементах ::before и ::after с помощью attr(). К примеру, href является атрибутом элемента <a>, как показано ниже.

HTML

<a href="https://tacobell.com">Taco Bell</a>

И мы можем отобразить значение href в ссылке.

CSS

a::after {
  content: ' → ' attr(href); /* Показываем стрелку перед href */
}

Вот как это выглядит.

See the Pen Displaying Link URLs by Will Boyd (@lonekorean) on CodePen.

Я добавил кое-что дополнительное в CSS выше. Вы можете поместить в content несколько объектов (обычно разделённых пробелом) для их объединения. В этом случае ' → ' соединяется с attr(href) для получения результата, который вы видите в демонстрации.

Отображение количества с помощью счётчиков

Счётчики CSS позволяют вам, так сказать, что-то считать. Значения счетчиков можно отображать с помощью ::before и ::after. Посмотрите на эту демонстрацию, которая показывает, сколько флажков отмечено. Здесь не используется никакого JavaScript.

See the Pen Checked Checkboxes Counter by Will Boyd (@lonekorean) on CodePen.

Вот соответствующий CSS.

input:checked {
  counter-increment: total;
}
output::before {
  content: counter(total);
}

Каждый установленный флажок увеличивает счётчик total, который затем отображается в псевдоэлементе ::before элемента <output>.

Если хотите узнать больше о счётчиках CSS, ознакомьтесь с этой статьей.