- 伪类元素的display默认值是inline。
- ::before和::after必须配合content属性来使用,content用来定义插入的内容,content必须有值,至少是空。
content可以有如下种类的值 :
-
string向元素内容中添加字符串,也可以添加特殊字符
特殊字符的html,js,css写法汇总 ,其中伪元素的content应使用css写法,而直接写在html中时采用html写法 -
attr()调用当前元素的属性,如下,结果为 : (百度)
a::after{
content:"("attr(title)")";
}
<a title="百度"></a>
-
url()/uri()展示一张图片,语法同background-image -
counter()调用计数器,配合counter-increment和counter-reset使用:
<style>
body{
counter-reset: section;
}
h1{
counter-reset: subsection;
}
h1:before{
counter-increment:section;
content:counter(section) "、";
}
h2:before{
counter-increment:subsection;
content: counter(section) "." counter(subsection) "、";
}
</style>
<body>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
</body>

了解更多可参考:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters