<style type="text/css">
.wrap{
width:200px;
height:200px;
text-align:center;
line-height:200px;
background-color:#369;
margin:20px auto;
}
p{
position:relative;
text-align:center;
font-size:15px
color:red;
padding:20px;
border:1px solid red;
margin:30px;
}
/* 明确表示了，after在<p>的文本的意思就是在元素的内容的前后添加内容 */
p::after{
content:"";
position:absolute;
background-color:yellow;
top:0px;
bottom:0px;
left:70%;
right:50px;
}
p::before{
content:" ";
position:absolute;
background-color:blue;
top:0px;
bottom:0px;
left:70%;
right:50px; /* before和after处在用一个位置，为什么after会覆盖掉before的样式 */ }
</style><body> <div class="wrap">This is a content</div> <p>This is a passage</p> </body>
代码如上。
我看了一些解析before和after这两个伪元素用法的视频代码讲解，但是仍存有一些疑问。
1、before和after是可以在元素内容的前后添加内容，通常结合content使用。我只知道如果<p>HelloWorld</p>使用before和after 的content:"Something add here"，就会在HelloWorld前后添加content。
2、【新手提问】但是如果我把before和after当成盒子模型来设置，设置在同一个位置，设置不同的背景颜色，为什么after会覆盖before？（如上述代码）
3、【新手提问】before和after本质是在元素内容的前后添加内容，但是他们可以随意设置位置，就无所谓前后一份，那么他们有什么用？
4、【新手提问】如果在<div></div>中使用before和after的话，那这个前后添加内容是指哪里的前后？我一直以为 before是在div的上面，即覆盖div，而after就是在盒子的后面，即在下面 被div覆盖。如果不是这样，在div中的before和after的前后指的是哪里？