想要将use class name用于before元素

Question

我不知道是否可以使用＆＃34;内容＆＃34;来放置CSS类的名称。每个p标签中的:: before元素如下：

 <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结合使用的内容来完成。这是一个演示，向您展示它将如何运作。

＆＃13;

＆＃13;

.roboto::before {
    content: attr(class);
    font-weight: bold;
    margin-right: 4px;
}

＆＃13;

<p class="roboto">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

＆＃13;

＆＃13;

＆＃13;

重要的部分是

content: attr(class);

attr函数非常强大，可以使用任何元素的attr。 除了使用该类之外，您还可以做更多的事情。这是另外两个例子。

＆＃13;

＆＃13;

#roboto::before {
    content: attr(id);
    font-weight: bold;
    margin-right: 4px;
}

a::before {
    content: attr(href);
    font-weight: bold;
    margin-right: 4px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有关attr函数的更多阅读，请查看此MDN article

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

＆＃13;

＆＃13;

.roboto::before {
    content: attr(data-class);
    font-weight: bold;
    margin-right: 4px;
}

＆＃13;

<p data-class="robot-data" class="roboto">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

＆＃13;

＆＃13;

＆＃13;