content属性与:before及:after伪元素配合使用,用于插入生成的内容;
与:before搭配,在元素前插入内容。
与:after搭配,在元素后插入内容。
可以插入的内容包括文本、图像、引号,还可以结合计数器,为页面元素插如编号。
举个栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>content</title>
<style>
body{
counter-reset: chapter; /*counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0*/
}
h1:before{
content: "第"counter(chapter)"章";
counter-increment: chapter;
}
h1 {
counter-reset:subsection;
}
h2:before{
counter-increment:subsection;
content:"第"counter(chapter) "章" counter(subsection) "节";
}
</style>
</head>
<body>
<h1> hhh</h1>
<h2>aaa</h2>
<h1>gggg</h1>
<h2>bbb</h2>
<h2>ccc</h2>
</body>
</html>
效果如下图: