我不知道是否可以使用每个p标签中:: before元素的“content”来放置CSS类的名称,如下所示：
<p class="roboto">Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>
.roboto::before {
content: "p[class] ";
font-weight: bold;
}
结果应该是这样的：
roboto Lorem ipsum dolor sit amet,consectetur adipisicing elit.
解决方法
是的,这可以使用内容与attr结合使用.这是一个演示,向您展示它将如何工作.
.roboto::before {
content: attr(class);
font-weight: bold;
margin-right: 4px;
}
<p class="roboto">Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>
重要的是
content: attr(class);
attr函数非常强大,可以使用任何元素的attr.
除了使用该类之外,您还可以做更多的事情.这是另外两个例子.
#roboto::before {
content: attr(id);
font-weight: bold;
margin-right: 4px;
}
a::before {
content: attr(href);
font-weight: bold;
margin-right: 4px;
}
<p id="roboto">Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p> <a href="http://google.com">Lorem ipsum dolor sit amet,consectetur adipisicing elit.</a>
有关attr函数的更多阅读,请查看此MDN article
如果您要这样做的原因是存储数据,我建议您使用数据属性而不是将其存储在类中.
.roboto::before {
content: attr(data-class);
font-weight: bold;
margin-right: 4px;
}
<p data-class="robot-data" class="roboto">Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>
