content属性是用来在元素中插入内容的，它只能用在::before和::after这两个伪元素上，它的值可以是一个字符串，也可以是一个图片，还可以是一个计数器。
简单认识content属性
content属性的值可以是一个字符串，也可以是一个图片，还可以是一个计数器。
::before {
content: "hello world"; /* 字符串 */
content: url(./img.png); /* 图片 */
content: counter(list); /* 计数器 */
}
当然content的属性值还有很多，比如attr()，open-quote，close-quote等等，除了这些，还有一些特殊的值，比如none，normal
，inherit等等。
content属性的值
string
string表示插入一个字符串。
::before {
content: "hello world";
}
函数
url()
url表示插入一个图片。
::before {
content: url(./img.png);
}
url函数的参数可以是一个图片的路径，也可以是一个base64编码的图片，最终会将图片插入到元素中。
参考：url()
counter()
counter表示插入一个计数器。
::before {
content: counter(list);
}
counter函数的参数可以是一个计数器的名称，或者是一个计数器的名称和一个样式，最终会将计数器插入到元素中。
参考：counter()
attr()
attr表示插入一个属性值。
::before {
content: attr(data-name);
}
attr函数的参数可以是一个属性的名称，最终会将属性的值插入到元素中。
参考：attr()
element()
element表示插入一个元素。
::before {
content: element(#id);
}
element函数的参数可以是一个元素的选择器，最终会将元素插入到元素中。
参考：element()
leader()
leader表示插入一个前导符号。
::before {
content: leader('.') target-counter(attr(href url), page);
}
注意：
leader函数查阅过相关资料，w3c中有说明，但是在实际使用中，没有任何一个浏览器支持，所以这里就不做详细说明了。
可选关键字
none
none是content属性的默认值，它表示不插入任何内容。
::before {
content: none;
}
normal
normal表示插入一个空字符串。
::before {
content: normal;
}
注意：在
before和after伪元素中，normal和none的效果是一样的。
open-quote
open-quote表示插入一个起始引号。
::before {
content: open-quote;
}
close-quote
close-quote表示插入一个结束引号。
::before {
content: close-quote;
}
no-open-quote
no-open-quote表示不插入一个起始引号。
::before {
content: no-open-quote;
}
no-close-quote
no-close-quote表示不插入一个结束引号。
::before {
content: no-close-quote;
}
inherit
inherit表示继承父元素的content属性值。
::before {
content: inherit;
}
可以有多个值
content属性可以有多个值，多个值之间用空格分隔。
::before {
content: url("./image.png") "hello" "world" attr(data-name);
}
content 属性的作用
上面疯狂 API，终于可以说说content属性的作用了。
插入内容
content属性可以插入内容，比如插入一个图片，插入一个计数器，插入一个属性值，插入一个元素等。
很明显我这里说的都是废话，因为大家都知道如果::before和::after伪元素不设置content属性，那么它们就不会有任何效果。
但是我想大家一般都是直接设置一个空字符串，只是为了让伪元素生效，而不是真正的插入内容。
我要说的是动态插入内容，比如插入一个计数器，插入一个属性值，插入一个元素等。
没有想过可以通过content属性动态插入内容的，可以看看下面的例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>content</title>
<style>
.box {
counter-increment: box;
}
.box::before {
content: counter(box);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
上面的例子中，我们通过counter-increment属性给每个.box元素设置一个计数器，然后通过content属性插入计数器的值。
当然这并不能惊艳到你，因为这个功能直接用ul和li就可以实现，像这种小功能，ul和li就够用了。
那么如果在伪元素中直接插入一个dom元素呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>content</title>
<style>
.box::before {
content: element(#element);
}
</style>
</head>
<body>
<div class="box"></div>
<div id="element">
<div class="box">666</div>
</div>
</body>
</html>
这个就点到为止，content属性还可以插入一些其他的内容，比如插入一个图片，插入一个属性值等，css的世界靠的是想象力。
防止元素被选中
content属性可以防止元素被选中，比如下面的例子。
通过content属性插入的内容是不会被选中的，不仅不会被用户选中，也不会被浏览器的默认行为选中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>content</title>
<style>
.box::before {
content: "hello";
}
</style>
</head>
<body>
<div class="box">world</div>
</body>
</html>
上面的例子中，我们通过content属性插入了一个hello字符串，这里我们只能选中world，而不能选中hello。
在部分浏览器中，如果我们做鼠标拖拽的时候，会默认选中文本，然后会弹出一个新的窗口，简直恶心的不行，这个时候我们可以通过content属性来防止这种情况。
<style>
[data-text]::before {
content: attr(data-text);
}
</style>
<div data-text="这里放内容"></div>
这样就完美解决了这个问题。
生成装饰性的内容
content属性可以生成装饰性的内容，最典型的例子就是iconfont就是通过content属性来生成的。
在使用iconfont的时候，我们需要在css中添加一个font-family属性，然后在html中添加一个class，然后通过content属性来插入一个unicode编码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>content</title>
<style>
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconfont:before {
content: "\e6a1";
}
</style>
</head>
<body>
<div class="iconfont"></div>
</body>
</html>
注意：这里的效果不成立，因为我没有引入
iconfont的字体文件，这个可以自己去iconfont官网下载dome查看源码和效果。
总结
content属性是一个非常强大的属性，它可以用来插入一些内容，也可以用来防止元素被选中，还可以用来生成装饰性的内容，这个属性的用法非常多，可以说是一个非常强大的属性。
