content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
content 属性生成的对象称为“匿名替换元素”，生成的内容都是替换元素
content属性的特点
1. content生成的文本无法被选中
content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好，content属性只能用来生成一些无关紧要的内容，如装饰性图形或者序号之类；同样，也不要担心原本重要的文字信息会被content替换，替换的仅仅是视觉层。
2. 设置了content属性，但无内容的元素，仍会被:empty伪类选择器选中
<div></div> div:empty { border-style: dashed; }
3. content动态生成的值无法获取。
content属性的应用
1. 清除浮动
.clear:after { content: ''; display: table; /* 也可以是'block' */ clear: both; }
2. 实现“两端对齐”以及“垂直居中/上边缘/下边缘对齐”效果
参考范例：content辅助元素与布局 » CSS世界demo演示
3. 生成文本
<template> <div style="padding: 20px"> <p class="ask">为什么open-quote/close-quote很少使用？</p> <p class="answer">因为直接使用字符更干脆！</p> </div> </template> <style scoped> .ask:before { content:'提问：“'; } .answer:before { content:'回答：“'; } .ask:after, .answer:after { content: '”'; } </style>
4. 生成图片
a:after { content: url(data:image/gif;base64,R0lGODlhBQAFAIABAM0AAAAAACH5BAEAAAEALAAAAAAFAAUAAAIHRIB2eKuOCgA7); }
5. 生成属性值
<template> <div style="padding: 20px"> <a href="https://www.baidu.com/" >百度</a> </div> </template> <style scoped> a:after { content: "(" attr(href) ")"; } </style>
效果为：
百度（百度一下，你就知道）
支持自定义的HTML属性
.icon:before { content: attr(data-title); }
6. 计数器
一个简单的范例如下：
<template> <div style="padding: 20px"> <div class="reset"> <div class="counter">我是王小二的第5个孩子</div> <div class="counter">我是王小二的第7个孩子</div> <div class="counter">我是王小二的第9个孩子</div> </div> </div> </template> <style scoped> .reset { counter-reset: wangxiaoer 3; } .counter:before { content: counter(wangxiaoer) '. '; counter-increment: wangxiaoer 2; } </style>
属性counter-reset
counter-reset: wangxiaoer 3;
- 第1个参数用于给计数器取个自定义的名称，如此处的 wangxiaoer
- 第2个参数为计数器的初始值（计数的起点），默认为0
IE和Firefox不识别值为负数或小数的初始值，认为是不合法数值，直接无视，当作默认值0来处理；
Chrome支持为负数或小数的初始值，任何小数都是向下取整，如2.99当成2处理。
counter-reset还可以设置为none和inherit，表示取消重置和继承重置
还可以一次命名多个计数器
counter-reset: wangxiaoer 2 wangxiaosan 3;
属性counter-increment
counter-increment: wangxiaoer 2;
- 第1个参数为计数器的名称 wangxiaoer
- 第2个参数为计数器的步长（即每次计数时的改变幅度），默认为1
每次使用css计数器时，都会调用一次counter-increment，所以上方范例中，初始值为3，但第一个元素最终渲染的编号是5
和counter-reset一样，counter-increment也可以一次定义多个
counter-increment: wangxiaoer wangxiaosan;
方法counter()
用于显示计数
用法一：
counter(wangxiaoer)
参数为计数器的名称 wangxiaoer
用法二：改变计数类型
counter(name, style)
- 第2个参数和list-style-type的值相同，可以为以下值：
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
即计数器递增递减不仅支持数字，还可以是英文字母或者罗马文等。
content: counter(wangxiaoer, lower-roman);
用法三：支持级联调用
content: counter(wangxiaoer) '\A' counter(wangxiaosan);
方法counters()
用于嵌套计数，如1.1 1.2 1.3
范例代码如下：
<template> <div class="reset"> <div class="counter">我是王小二 <div class="reset"> <div class="counter">我是王小二的大儿子</div> <div class="counter">我是王小二的二儿子 <div class="reset"> <div class="counter">我是王小二的二儿子的大孙子</div> <div class="counter">我是王小二的二儿子的二孙子</div> <div class="counter">我是王小二的二儿子的小孙子</div> </div> </div> <div class="counter">我是王小二的三儿子</div> </div> </div> <div class="counter">我是王小三</div> <div class="counter">我是王小四 <div class="reset"> <div class="counter">我是王小四的大儿子</div> </div> </div> </div> </template> <style scoped> .reset { padding-left: 20px; counter-reset: wangxiaoer; } .counter:before { content: counters(wangxiaoer, '-') '. '; counter-increment: wangxiaoer; } </style>
注意事项
显示content计数值的那个DOM元素在文档流中的位置一定要在counter-increment元素的后面，否则是没有计数效果的。
