多个内容：attr() 值

Question

我试图在我的元素中显示 2 件事； 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() 函数和引号之间的空格与引号中的空格 不同。后者是一个包含空格字符的实际字符串，它将分隔输出中的两个属性值。三部分之间的空格是将它们连接在一起的运算符。