是否可以在CSS内容属性中将HTML属性的数据与url（）一起使用？

Question

我可以通过CSS将一些其他内容放置到我的HTML代码中：

HTML：

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

CSS：

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

有没有办法从HTML代码获取URL？像这样：

  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>