如何在 CSS 内容属性中混合 url 字符串和属性值？ [复制]

Question

我需要使用 CSS content 属性和 :before 伪选择器显示与其旁边的每个项目对应的图像。

如何以有效的工作方式执行以下操作：

content: url("http://example.com/images/" + attr(title));

在 URL 上显示图像

 "http://example.com/images/523452345"

上面的不行！

Answer 1

这是不可能的，这是规范，你不能把attr()放在url()里面，它们只能互相跟随。

content: normal | none | 
         [ <string> | <uri> | <counter> | attr() |
           open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit


div:before {
    content: url("http://example.com/image.jpg") attr(title);
}