想要将use class name用于before元素

Question

我不知道是否可以使用每个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.

Answer 1

是的,这可以使用内容与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文章

如果您要这样做的原因是存储数据,我建议您使用数据属性而不是将其存储在类中.

.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>