.box:befer{} .box:after{}
<div class="box"></div>
：before和：after的层级是多少啊？为什么审查元素before会在div的后面呢？
你在哪个标签使用伪类，就在哪个标签的下级
首先这两个伪类，是两个子节点。after，顾名思义，在所有子节点的后面，befer就是所有子节点的前面。
你可以这样理解 ：before 和 ：after 就是你的左膀右臂 是围绕着你自身的