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
生成的内容之上。