多个内容：attr（）值

Question

我试图在我的元素中显示两件事; class名称和自己创建的data-size变量。分开一个白色空间。

我可以这样做：

.element:before {
   content: attr(class);
}

.element:after {
   content: attr(data-size);
}

但它似乎不是一种正确的方法。我也尝试过这样做：

.element:before {
   content: attr(class data-size);
}

但那并没有起作用。

输入

HTML 的

<div class="element" data-size="20"></div>

CSS

.element:before {
    content: attr(class data-size);
}

通缉输出

元素20

Demo here

Answer 1

要在CSS中连接两个或多个字符串值，separate them with whitespace：

.element:before {
    content: attr(class) ' ' attr(data-size);
}

请注意，attr()函数与引号之间的空格与引号中的空格不同。后者是一个包含空格字符的实际字符串，它将分隔输出中的两个属性值。这三个部分之间的空白是将它们连接在一起的运算符。