带有文本节点内容的CSS属性引用?

时间:2015-08-28 22:37:20

标签: css html5 css3

我正在尝试在内部工具上使用用户风格的黑客,我想只保留CSS(所以我可以使用我已经在每个浏览器上使用的时尚扩展,而不是添加油脂猴子风格扩展)

系统有以下html:

<a href="...">
    <span>
        <img src="...">
    </span>
    username
</a>

图像是占位符,因为系统未与任何内容集成。

我可以使用http://company.com/avatars/<username>.png

等网址获取公司的用户头像

和CSS允许我做像

这样的事情
/* show link destination after the A tag contents */
a:after {
    content: " (" attr(href) ")";
}

我的计划是添加user-CSS以隐藏无用的图片,并在A标记后附加背景,以显示该用户的公司头像。 A标记属性上没有任何内容可以帮助我。唯一的提示是在A标签文本节点的直接和最后一个子节点。

有没有办法只使用CSS?

因为这是用于内部工具的用户式黑客,所以越尖端技术越好。无需支持所有浏览器,关心性能等。

1 个答案:

答案 0 :(得分:0)

这是不可能的。

无法将用户名连接到图像中。 background属性不接受content之类的字符串连接。人们会认为字符串值的相同规则适用于所有css属性,content似乎很特殊。

如评论中所指出的,可以在css规则上拥有完整的background网址并根据用户名进行匹配,但是您必须为每个要匹配的用户名添加一条规则。不是超过1k记录的选项。