content 几乎都是用在 ::before 和 ::after 伪元素中(1)。
content 生成的文本无法选中、无法复制、更无法被搜索引擎抓取，因此只适合生成图标、序号这类无关紧要的内容，最常见的用法：比如清除浮动、插入字体图标等等。
*(1) 为了将伪类( 例如 :hover )和伪元素区别开来，CSS3 标准要求伪元素使用双冒号，但目前的浏览器也接受伪元素单冒号的写法，例如 :before。
例子1：
ul li { list-style: none; float: left; } div { height: 2px; background: orange; } .clear::after { content: " "; display: table; clear: both; }
- AA
- BB
- CC
例子2：
其他常见用法@font-face { font-family: 'icon'; src: url('font_icon.woff'); } .icon { font-family: 'icon'; } .icon_user::before { content: "e008"; } 创建人
使用 content 生成一些装饰性的符号或文字。
例子：
p::before { content: "《"; color: orangered; font-weight: 800; } p::after { content: "》"; color: orangered; font-weight: 800; } 钢铁是怎样炼成的
使用 content: attr(); 实现悬浮提示。
例子：
Content 计数器p { position: relative; height: 30px; line-height: 30px; } p:hover::before { content: attr(data-tip); background-color: #FFC107; color: #fff; padding: 3px 10px; position: absolute; left: 0; top: 30px; font-size: 12px; height: 15px; line-height: 15px; } 钢铁是怎样炼成的
在介绍 Content 计数器之前，我们可以先观察下面的例子：
例子：
body { counter-reset: item; } input:checked { counter-increment: item; } h1>span::before { content: counter(item); } 苹果 香蕉 葡萄 你选择了 种水果
例子中，我们可以看到，在完全不使用 Javascript 的情况下，我们通过 CSS 就可以实现，选择几种水果，数值也随着变化的效果。
下面我们依次讲解实现 Content 计数器的三个关键点：
1、Counter-reset 属性
上例中，我们在 body 元素中，用到了 counter-reset 属性，其主要作用就是" 声明一个变量 "( 通常在父辈元素中进行声明 )，我们也可以为这个变量赋值，默认是 0。
例子：
h1 { counter-reset: item 999; } h1::before { content: counter(item); }
我们也可以同时" 声明多个变量 "( 空格分隔 )，并为其赋值。
例子：
h1 { counter-reset: item_1 9 item_2 99; } h1::before { content: counter(item_1); } h1::after { content: counter(item_2); }
值也可以是负整数或小数：如果为负整数，大多数浏览器会正常显示，如果为小数，大多数浏览器会直接转变为 0。
例子：
h1 { counter-reset: item -1; } h1::before { content: counter(item); }
2、Counter-increment 属性
counter-increment 属性的后面可以跟随数字，表示每次计数的变化值( 默认为 1 )。
counter-increment 属性可以简单理解为" 调用变量 "，每调用一次，变量的值就会和变化值相加一次。
例子：
h1 { counter-reset: item 999; counter-increment: item; } h1::before { content: counter(item); }
与 counter-reset 相呼应，我们也可以同时" 调用多个变量 "( 空格分隔 )。
例子：
h1 { counter-reset: item_1 7 item_2 97; counter-increment: item_1 2 item_2 2; } h1::before { content: counter(item_1); } h1::after { content: counter(item_2); }
变化值也可以是负整数，每调用一次，变量的值就会相应减少。
例子：
h1 { counter-reset: item 1000; counter-increment: item -1; } h1::before { content: counter(item); }
3、Counter 方法
counter 方法主要用来显示变量的值，上面的例子中，我们一直在使用。除此之外，counter 还支持设置列表样式，即 CSS 中的 list-style-type。其基本语法为：
counter(name,style)
其中，参数 name 为变量名，参数 style 为列表样式。
例子：
h1 { counter-reset: item 2; counter-increment: item; } h1::before { content: counter(item, lower-roman); }
与上面相呼应，counter 方法可以多次使用，以显示多个变量的值。
例子：
h1 { counter-reset: item_1 1 item_2 2; } h1::before { content: counter(item_1) "+" counter(item_1) "=" counter(item_2); }
counter 还有一个升级版的方法，即 counters 方法。counters 方法主要用来实现复杂的列表嵌套。其基本语法为：
counters(name, string, style)
其中，参数 name 和 style 与 counter 方法一样，在此不再介绍。参数 string 为子列表序号的分隔符。
例子：
.p_item { counter-reset: item; padding-left: 20px; } .c_item::before { counter-increment: item; content: counters(item, "-") "."; color: crimson; } CSS 盒模型
CSS 选择器同胞选择器
属性选择器[attribute~=value]
[attribute*=value]
类似于上例中，这种复杂的嵌套关系，最容易犯错的地方就是将 p_item 与 c_item 设置成兄弟关系，而不是父子关系：
例子：
.p_item { counter-reset: item; padding-left: 20px; } .c_item::before { counter-increment: item; content: counters(item, "-") "."; color: crimson; } CSS 选择器
同胞选择器
属性选择器
CSS 盒模型
上例中，我们可以看到，在第二层标签里，出现了设置为兄弟关系的 p_item 与 c_item ，这就导致" CSS 盒模型 “进入了第二级的嵌套，而正常情况下，” CSS 选择器 “与” CSS 盒模型 "应该同属于第一级嵌套。
如有错误，欢迎指正，本人不胜感激。
