before and after, the former element is inserted before the thing, which is something inserted after the element, but something more than just insert the text only, as well as icons, as well as operating the calculator.
Since both the basic operation as an example here in before
Insert text
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
p:nth-child(1)::before{
content: '插入文字'
}
p:nth-child(2)::before{
content: '插入❤'
}
p:nth-child(3)::before{
/*改变插入文字的颜色和背景*/
content: '插入文字';
background: skyblue;
color: #fff;
}
</style>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
</html>Insert Picture
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
p::before{
content: url('./菜单.svg'); /*图片地址*/
}
</style>
</head>
<body>
<p>段落1</p>
</body>
</html>counter
Pure Digital
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
/*
这里的add，可以是任意变量，但标签的counter-increment属性值要和上面的一样。
*/
h2::before{
content: counter(add);
}
h2{
counter-increment: add;
}
</style>
</head>
<body>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
</body>
</html>Text splicing
Counter splicing can also be text, but do not like what the plus
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
h2::before{
content: '第'counter(add)'章';
}
h2{
counter-increment: add;
}
</style>
</head>
<body>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
</body>
</html>Specify item number
content: counter(计数器名, 编号种类)
upper-alpha uppercase letter
upper-roman Roman uppercase
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
h2::before{
content: counter(add, upper-roman)'. ';
}
h2{
counter-increment: add;
}
</style>
</head>
<body>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
</body>
</html>Number nesting
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
h2::before{
content: counter(add)'. ';
}
h2{
counter-increment: add;
counter-reset: addd; /*让子标题重新编号*/
}
h3::before{
content: counter(addd)'. ';
}
h3{
counter-increment: addd;
}
</style>
</head>
<body>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
</body>
</html>In the horizontal line number and the number is incremented
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
h2::before{
content: counter(add)'. ';
}
h2{
counter-increment: add;
counter-reset: addd; /*让子标题重新编号*/
}
h3::before{
content: counter(add) '-' counter(addd)'. ';
}
h3{
counter-increment: addd;
padding-left: 40px;
}
</style>
</head>
<body>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
</body>
</html><!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
h2::before{
content: counter(add)'. ';
}
h2{
counter-increment: add;
counter-reset: addd; /*让子标题重新编号*/
}
h3::before{
content: counter(add) '-' counter(addd)'. ';
}
h3{
counter-increment: addd;
counter-reset: adddd;
padding-left: 40px;
}
h4::before{
content: counter(add) '-' counter(addd) '-' counter(adddd) '. ';
}
h4{
counter-increment: adddd;
padding-left: 40px;
}
</style>
</head>
<body>
<h2>标题</h2>
<h3>子标题</h3>
<h4>子标题的子标题</h4>
<h4>子标题的子标题</h4>
<h2>标题</h2>
<h3>子标题</h3>
<h4>子标题的子标题</h4>
<h4>子标题的子标题</h4>
<h2>标题</h2>
<h3>子标题</h3>
<h4>子标题的子标题</h4>
<h4>子标题的子标题</h4>
<h2>标题</h2>
<h3>子标题</h3>
<h4>子标题的子标题</h4>
<h4>子标题的子标题</h4>
</body>
</html>Nested text symbols added on both sides of the string
First, there are two content attribute values, open-quoteand close-quotemay be added as braces, single and double quotation marks or the like on both sides of the word notation character.
open-quoteIt is the symbol of the beginning, close-quotethe end symbol, elements like the use of quotesproperty to decide what to sign.
It is not used quoteswhen the property, the default is to use double quotes
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
h2::before{
content: open-quote;
}
h2::after{
content: close-quote;
}
</style>
</head>
<body>
<h2>标题2</h2>
</body>
</html>Using other symbols
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
h2::before, h3::before{
content: open-quote;
}
h2::after, h3::after{
content: close-quote;
}
h2{
quotes: "("")"
}
h3{
/*转义字符*/
quotes: "\\""\\"
}
</style>
</head>
<body>
<h2>标题2</h2>
<h3>标题3</h3>
</body>
</html>