前端必修技能：高手进阶核心知识分享 - css盒的before、after和子元素的层叠关系解析及应用

早在十几二十年前，我最开始接触CSS的时候，根本没听说过 before 和 after ，那时候公司的浏览器更新到了IE8，我那个老古董的WINXP系统的浏览器升级到IE7，市面上甚至大部分电脑的浏览器还都是IE6。那时候每次做页面 ，最头疼的就是各个浏览器的兼容问题。甚至公司专门请了个人坐在两台电脑前，装了各个品牌，各个版本的浏览器，在那不停的刷我们的项目。现在好了，浏览器兼容问题越来越少了，跨平台成为前端要解决的新的高峰。学习的氛围越来越好，国内的高手大神们也越来越多了，但要学的技术也越来越多了。。。CSS都从原来那么简陋的玩意儿，变成现在可以写动画的浏览器前端利器，甚至能解决一部分原来必须JS才能解决的问题。唉。。老了。

话题扯远了，这篇文章呢，主要是分享一下关于 ::before、::after 和 子元素的层叠关系 以及 这几种元素结合的应用。

前端必修技能：高手进阶核心知识分享 - css盒的before、after和子元素的层叠关系解析及应用

CSS层叠由来

在前端的世界里，浏览器不应该是平面的。它不但有X轴（水平方向），有Y轴（竖直方向），它还有个Z轴（垂直方向：我们的视线与浏览器平面的垂直方向）。你必须能够理解这个方向，才能合理而熟练的利用它（层叠的关系），制作出精美的页面和漂亮的动画。

Z轴的存在,就引申出 一个问题：各元素之间 距离 观察者 谁近谁远的 问题：---- 上下文堆叠顺序 (stack contex)。CSS的中文全称叫什么来着：层叠样式表。没错，CSS本来就为了解决HTML各个标签之间的层叠关系和样式表现而诞生的。

在HTML页面中的各个标签，从书写角度上看，存在这两种关系。一种是顺序（层叠），一种是嵌套。那么它们在浏览器解析的时候，如果不发生位置的重叠，全部排开铺在网页上，这个情况是好解决的。但是，如果，需要位置重叠时候，谁在前（上）面，谁又在后（下）面呢？顺序排列的几个标签，如何叠放？嵌套的标签，又如何显示？ 什么又是 伪元素 ::before 和::after 呢？

伪元素::before 和 ::after

 ::before和::after：::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用。

特别需要注意的是：单标签 不支持伪元素 ::before 和 ::after ..

代码示例：

    <style>
        p::after{
            content: "hahaha";
            color: red;
        }
        p::before{
            content: "hehehe";
            color: coral;
        }
</style>

层叠解析

我们来看一个HTML的结构的例子：

  <div class="father">
    <div class="child-1"></div>
    <div class="child-2"></div>
  </div>

在这个例子里，很明显的 div元素father 作为父级，与它的 子元素 div元素 child-1 和 child-2 就是嵌套关系。而两个子元素之间，就是层叠关系。那么我们在不改变他们的定位关系（postion）和Z轴层级（z-index）的前提下，看看他们是如何在浏览器中表现的：

/* css */
.father {
  position: relative;
  height: 400px;
  width: 400px;
  background: #ddd;
  color: #fff;
    
}
.father::before {
  content: "before";   
  width: 100px;
  height: 100px;
  background: blue;  
}
.father::after {
  content: "after";  
  width: 100px;
  height: 100px;
  background: orange; 
  /* transform: translate(60px,-240px); */
}
.child-1 {
  display: block;
  height: 100px;
  width: 100px;
  background: green;
  /* transform: translate(20px,-80px); */
}
.child-2 {
  display: block;
  height: 100px;
  width: 100px;
  background: purple;
  /* transform: translate(40px,-160px); */
}

首先，我们看看不做任何位移时，father元素的 ::before ::after 和它的两个子元素 child-1 child-2的 展示方式。刷新浏览器：

接下来，我们给子元素进行位移，不移动befoer和after，看看它们如何排列：

.father::before {
  content: "before";  
  display: block;
  width: 100px;
  height: 100px;
  background: blue;  
}
.father::after {
  content: "after";  
  display: block;
  width: 100px;
  height: 100px;
  background: orange; 
  /* transform: translate(60px,-240px); */
}
.child-1 {
  display: block;
  height: 100px;
  width: 100px;
  background: green;
  transform: translate(20px,-80px);
}
.child-2 {
  display: block;
  height: 100px;
  width: 100px;