Можно ли использовать данные из атрибута HTML с url () в свойстве содержимого CSS?

Question

Я могу разместить дополнительный контент через CSS на свой HTML код:

HTML:

<a href="test.html" data-tooltip="/content.svg">

CSS:

[data-tooltip]::after {
  content: url(/content.svg);
}

Есть ли способ получить URL из кода HTML? Примерно так:

  content: url(attr(data-tooltip));

Я бы хотел показать отдельную всплывающую подсказку для каждой ссылки с описанием связанной страницы.

Answer 1

Вы не можете получить доступ к атрибутам из других элементов, но вы можете установить переменную HTML в родительском элементе, а затем использовать ее в своем css в псевдоэлементах

    a.test::after { 
        content: var(--content);
    }

<a class="test" href="test.html" style="--content: url(./content.png);">
test
</a>