我不知道是否可以使用每个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>
原文地址:https://www.jb51.cc/css/214094.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。