CSS伪元素可以引用当前元素的属性并将其作为url然后引用这个url来显示图片吗？

Question

比如说有个元素，它有个属性叫做avatar-url，属性值是个url，现在我想要通过伪元素的方式在其旁边显示图片，这个图片会引用这个url，请问有什么办法可以做到吗？

已知通过下面这种方式亲测无效：

#my-element::before {
    content: url(attr(avatar-url));
}

Answer 1

我影响里应该不行了，早前 attr() 的多范围应用的草案被废弃之后，好像只能在 content 里面直接使用了，你用 url() 包裹一层应该没办法去读取对应的属性了。

其实你只要直接写行内的 style="background-image:url(xxx)"，然后做一下背景图的偏移，然后伪类设置好宽高然后继承下来背景图，效果应该是一样的。

这里是一个简易的Demo，但是都这样了为啥不直接写一个自定义 <icon> 组件呢，只需要把 url 链接 prop 进去就行了，是吧！

Answer 2

目前还不行。

未来如果支持了，写法可能是这样

#my-element::before{
  content: attr(avatar-url url, '') /* url 表示值的类型*/
}

https://developer.mozilla.org...

Answer 3

可以使用data-xxx的形式定义，然后伪类通过attr(xxx)获取