如何在css3中将图像添加到:: before伪元素

Question

我有一个带有数据头像网址的锚点,指向一个图像,我想在a.avatar ::之前添加一个块图像以显示图像.

a[data-avatar]::before {
    content: "";
    background: url( attr(data-avatar url) ) no-repeat 0 0;
    width: 16px;
    height: 16px;
    display: block;
    margin: 0 5px 0 0;
}

<a href="/username" data-avatar="http://some-url.com/image.png">my profile</a>

我无法设置背景图像 url(attr(data-avatar))

如果有人想要采取刺戳,这是一个小提琴 - 我只对CSS这种做法感兴趣而没有多余的标记.

http://jsfiddle.net/chovy/RDrxV/

Answer 1

对不起,因为在评论中提到它是不可能与当前CSS2.1实施attr()和url()使用元素的自定义数据属性,如生成内容的图像URL.

从值和单元级别3不清楚是否可以/应该attr()作为参数传递url()(或者如果语法甚至允许它):

background: url(attr(data-avatar)) no-repeat 0 0;

或者只是传递attr()它自己并且它将生成一个URL值(这更可能是因为它们具有url与默认string类型不同的类型):

background: attr(data-avatar url) no-repeat 0 0;

但无论哪种方式,截至2012年,现有的浏览器尚未实现新attr()功能,因此您将无法使用纯CSS生成的内容执行此操作.希望浏览器会在模块进入CR后开始实现它,因为看到这个功能由于缺乏兴趣而丢失是一件非常遗憾的事.