我可以通过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));
我想为每个链接显示一个单独的工具提示,并提供对链接页面的描述。
答案 0 :(得分:4)
您无法访问其他元素的属性,但可以在父元素中设置HTML变量,然后在伪元素的CSS中使用它
a.test::after {
content: var(--content);
}
<a class="test" href="test.html" style="--content: url(./content.png);">
test
</a>