Html 多个内容：attr（）值

我试图在我的元素中显示两件事；

类

名称和自己创建的

数据大小

变量。用一个空格隔开

我可以通过这样做来实现这一点：

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

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

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

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

但这并不奏效

输入

HTML

想要的输出

要素20

---

要在CSS中连接两个或多个字符串值，请执行以下操作：

---

请注意，

attr（）

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

请尝试

attr（class）“”attr（数据大小）

谢谢，如果可以，请接受您的答案。我可以想做多少次就做多少次吗？我还可以在这里放其他东西吗？@Bas：是的，你可以想用多少串就用多少串。您还可以放置任何其他您想要的字符串，只要将其置于引号中即可，例如

content:attr（data foo）'abc'啊，好吧，我不知道。也可以插入新行吗？@Bas:可以，要插入新行，请使用
'\a'
。您需要将
空白：pre
或
pre wrap
添加到规则中，以使其实际渲染换行符。这里有一个演示：由于某些原因，这不起作用：
content:attr（class）'\a“attr（数据大小）
<div class="element" data-size="20"></div>

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

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