1.content是什么？

定义：content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容。此特性目前已被所有主流浏览器支持。在CSS 3 Generated Content工作草案中，content属性添加了更多的特征，例如：插入以及移除文档内容的能力，以创建脚注，结语，及段落注释。但是目前还没有浏览器支持content的扩展功能。
2.content有什么作用？

content属性与:before及:after伪元素配合使用生成文本内
嵌入文字符号
插入元素的属性值
插入项目编号
项目编号修饰
指定编号种类
3. 实例讲解

3.1 插入纯文字

通过before及:after伪元素，设置content属性为插入文本内容
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 属性 content 实例 </title>
</head>
<style>
div{
    padding: 30px;
    background-color: pink;
div p{
    font-size: 16px;
div p::after{
    content: "后面插入文本";
    font-size: 12px;
    color: red;
div p::before{
    content: "前面插入文本";
    font-size: 12px;
    color: green;
</style>
    <div class="txt">
      <p>插入纯文字</p>
    </div>
</body>
</html>
3.2 嵌入文字符号
通过quotes配合content实现不同的符号。
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 属性 content 实例  ---  赖个都是爱情！</title>
</head>
<style>
    padding: 30px;
    background-color: pink;
div p{
    font-size: 16px;
.gay{
    quotes:"'" "!'" ;
.girl{
    quotes:'“' '！”' ;
div p::before{
    content: open-quote;
    font-size: 12px;
    color: red;
div p::after{
    content: close-quote;
    font-size: 12px;
    color: green;
</style>
      <p class="gay">我爱你，宝贝</p>
      <p class="girl">爱我就打钱</p>
</body>
</html>
3.3 插入图片
ps：content设置图片无法调整大小
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 属性 content 实例  ---  迪丽热巴 古娜娜扎 玛尔扎哈</title>
</head>
<style>
div{
    padding: 30px;
    background-color: pink;
div p{
    font-size: 16px;
div p::before{
    font-size: 12px;
    color: red;
div p::after{
    content: url("./WechatIMG293.png") ;
    font-size: 12px;
    color: green;
</style>
        <p>玛尔扎哈yyds</p>
    </div>
</body>
</html>
3.4插入元素的属性值
通过attr获取到元素的属性值插入
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 属性 content 实例  ---  迪丽热巴 古娜娜扎 玛尔扎哈</title>
</head>
<style>
div{
    padding: 30px;
    background-color: pink;
div p{
    font-size: 16px;
div p::before{
    font-size: 12px;
    color: red;
div p[data-line]::after{
    content:"(" attr(data-line) ")";
    font-size: 12px;
    color: green;
</style>
        <p data-line="我是p标签的属性值"></p>
    </div>
</body>
</html>
3.5插入项目编号
通过设置counter， counter-reset实现
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 属性 content 实例 </title>
</head>
<style>
div{
    padding: 30px;
    background-color: pink;
div p{
    counter-reset: number 1;
div p::before{
    content: counter(number)'. ';
    color: green;
</style>
        <p>编号一</p>
    </div>
</body>
</html>
3.6项目编号修饰
通过设置counter， counter-increment实现
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 属性 content 实例 </title>
</head>
<style>
    padding: 30px;
    background-color: pink;
div p{
    counter-increment: number 1;
div p::after{
    content:'第:'counter(number)'节';
    color: green;
</style>
        <p>第三章 <br /></p>
</body>
</html>
3.7  指定编号种类
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 属性 content 实例 </title>
</head>
<style>
    padding: 30px;
    background-color: pink;
div p{
    counter-increment: number 3;
div p::after{
    content:"第" counter(number, upper-alpha) "章";
    color: green;
</style>
</body>
</html>
4.常用功能
上面的实例只是帮我们学习了解content，其实上述实例用到的不算多，下面就把常用的列出来
4.1 清除浮动
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> CSS 属性 content 应用 -清除浮动</title>
</head>
<style>
    .left {
        float: left
    .right {
        float: right
    .clear:after {
        content: '';
        clear: both;
        display: block;
</style>
    <div class="container clear">
        <div class="left">左</div>
        <div class="right">右</div>
</body>
</html>
父元素.container中两个子元素.left和.right浮动后会脱离文档流，无法撑起容器，造成.container高度为0。使用伪元素:after清除浮动，三个属性缺一不可：
content: '';通过:after添加一个内容为空的伪元素。
clear: both;伪元素:after两侧浮动清除。
dispaly: block;设置块元素，因为clear只对块元素有效。
4.2 小三角气泡窗口
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> CSS 属性 content 应用 -小三角气泡</title>
</head>
<style>
   .box {
    width: 200px;
    height: 100px;
    border-radius: 5px;
    background: #fff;
    position: relative;
.box:after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: 20px;
    width: 0;
    height: 0;
    border-top: 10px solid #fff;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
</style>
    <div class="box"></div>
</body>
</html>
配合伪元素:after，实现了一个右下角带倒三角指向性的气泡窗口。通过调整border各边的颜色和绝对定位位置，可以绘制出指向不同的气泡窗口，只用一个div标签实现，是不是既简洁又美观。可能你会想到这是伪元素:after的效果，和content属性无关，实际上去掉content后:after是不生效的。
4.3 字体图标
通过浏览器自带的特殊字符实现
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> CSS 属性 content 应用 -  字体图标</title>
</head>
<style>
    body {
        background-color: pink;
    .music:before {
        content: '\266C';
        color: red;
</style>
    <span class="music">晴天-周杰伦</span>
</body>
</html>
4.5 加载动画
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> CSS 属性 content 应用 -  加载动画</title>
</head>
<style>
   .loading:after {
        content: ".";
        animation: loading 2s ease infinite;
    @keyframes loading {
        33% {
            content: "..";
        66% {
            content: "...";
</style>
    <p class="loading">加载中 </p>
</body>
</html>
不会做动图，大家可以自己试一下
还有很多其它的应用，大家可以自己试一试。