::before 和 ::after 来创建一个伪元素，作为已选中元素的第一个、最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
CSS的 content 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。
可选的值有以下：

  • none：不产生伪类元素，如果定义了伪类元素， content 值为 none 也不会产生伪类元素
  • normal：::before 和 ::after 伪类元素中会被视为 none
  • string：文本内容
  • uri资源：URI值会指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位（比如无图片标志）
  • attr：将元素的X属性以字符串形式返回。如果该元素没有 X 属性，则返回一个空字符串
  • counter：计算器
  • quote：引号

    妙用

    合理使用伪元素可以实现很多之前很难实现的效果，比如：

  1. 动态省略号

    1. <span class="demo">测试</span>
    @keyframes dot{
0%{ content: "." }
50%{ content: ".." }
100%{ content: "..." }
}
.demo:after{
content: '';
animation: dot 1.2s infinite both;
}

    效果图：
    dynamicdot.gif

  2. 计数器

    body {
counter-reset: section;           /* 重置计数器settion成0 */
}
h3:before {
counter-increment: section;      /* 增加计数器section值 */
content: "Section " counter(section) ": "; /* 显示计数器 */
}

    <h3>测试1</h3>
<h3>测试2</h3>
<h3>测试3</h3>

    效果：
    image.png

  3. 特殊字符

  4. attr

    body {
counter-reset: section;           /* 重置计数器settion成0 */
}
h3:before {
counter-increment: section;      /* 增加计数器section值 */
content: attr(data-title)  counter(section) ": "; /* 显示计数器 */
}

    <h3 data-title="first">测试1</h3>
<h3 data-title="second">测试2</h3>
<h3 data-title="third">测试3</h3>

    效果：
    image.png

  5. 清除浮动

    .box {
   width: 200px;
   background-color: red;
 }
 .box::after {
   content: '';
   display: block;
   clear: both;
 }
 .item {
   width: 100%;
   float: left;
   height: 50px;
   border: 2px solid #000;
   box-sizing: border-box;
 }

    <div class="box">
<div class="item"></div>
</div>

    效果：
    image.png

  6. 分割线

    .box {
position: relative;
padding: 0 20px;
}
.box::after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 3px;
background: #ccc;
}

    <span class="box">测试1</span>
<span class="box">测试2</span>
<span class="box">测试3</span>

    效果：
    image.png

  7. 遮盖元素

    .box {
height: 50px;
position: relative;
background: red;
}
.box::after {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: #ccc;
}

    <div class="box"></div>

    效果：
    image.png

  8. 三角形箭头

    .box::after {
   content: '';
   border: 20px solid transparent;
   border-bottom-color: red;
 }

    <div class="box"></div>

    效果：
    image.png