CSS伪元素::after和::before

:after是一个CSS伪元素，使用::after，你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。虽然最终生成的东西并不是真正的DOM里的内容，但这些内容能像普通内容一样显示，基本的效果是这样的:

CSS代码

div::after {
  content: "你好";
}

HTML代码

<div>
  <!-- div里的其它内容 -->
  你好
</div>

::before跟::after完全类似，只是它插入的内容会出现在其它内容之前。这两者的区别可以简单描述为：

• 想让插入的内容出现在其它内容前，使用::before，否者，使用::after。
• 在代码顺序上，::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上。