html – 多个内容:attr()值

前端之家收集整理的这篇文章主要介绍了html – 多个内容:attr()值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_502_0@

我试图在我的元素中显示两件事;类名和自己创建的数据大小变量.与一个白色空间分开.

我可以这样做:

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

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

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

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

但那并没有奏效.

输入

HTML

CSS

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

想要输出

要素20

Demo here

最佳答案
要在CSS中连接两个或多个字符串值,separate them with whitespace

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

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

猜你在找的HTML相关文章