Обратная ссылка на сопоставленный атрибут

Question

Мы можем выбирать элементы на основе соответствия атрибута . Есть ли способ получить обратную ссылку на фактическое сопоставленное значение? Например, установка фонового изображения на основе соответствующего класса:

div[class^="icon-"] {
    background-image: url(img/<reference here>.png);
}

Вместо указания пути для каждого значка вручную:

.icon-foo {
    background-image: url(img/icon-foo.png);
}

.icon-bar {
    background-image: url(img/icon-bar.png);
}

/* ... and so on ... */

Answer 1

Нет, к сожалению, невозможно только с CSS. Но вы можете использовать JavaScript:

const icons = document.querySelectorAll('div[class^="icon-"]');
for (icon of icons) {
	icon.style.backgroundImage = `url('img/${icon.classList}.png')`;
}

<div class="icon-home"></div>
<div class="icon-play"></div>
<div class="icon-search"></div>