时间戳

首页 > 解决方案 > 是否可以在 CSS 内容属性中使用带有 url() 的 HTML 属性中的数据？

html - 是否可以在 CSS 内容属性中使用带有 url() 的 HTML 属性中的数据？

问题描述

我可以通过 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));

我想为每个链接显示一个单独的工具提示，其中包含链接页面的描述。

标签： htmlcss

解决方案

您不能从其他元素访问属性，但您可以在父元素中设置一个 HTML 变量，然后在伪元素的 CSS 中使用它

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

推荐阅读