伪元素 - CSS 'content'属性可以获取内联样式的值吗？

Question

我想做以下事情：

<div style="background-image: url(http://some_url.com);"></div>
div:after {
    content: attr(style[background-image]);
}

这里的目标是，我想从内联应用到html元素的内容中获取一个值。这可能吗？如果可能，正确的语法是什么？

Answer 1

attr()仅用于HTML属性，而不用于CSS属性。即使您可以获得attr(style)（实际上可以），您也只能获得该属性的文本值，即以下字符串：

"background-image: url(http://some_url.com);"

但是，您将无法对该文本值执行任何有意义的操作（可能除了将其打印为content）。

如果您希望您的伪元素具有与元素相同的背景图像，请使用：

div:after {
    background-image: inherit;
}

同样，这本身并不是很有意义；您必须指定其他样式，如background属性值的其余部分，并为其提供尺寸。

如果您想获取背景图像的URL并将其打印为内容，那么使用CSS是不可行的。您需要使用JavaScript查看计算出的background-image值，解析该值，并将其作为内容插入，而不是使用:after伪元素。