至于CSS中的：before和：after伪元素，相信大家都不陌生，下面就来讲解下这些元素的具体运用！
:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。
先来个实例：
<style>
p:before{ content: "H" }
p:after{ content: "d" }
</style>
<p>ello Worl</p>
以上代码会在页面展示是：Hello World
在浏览器审查元素中的内容是
p标签内部的内容的前面会被插入一个:before伪元素，该伪元素内包含的内容是"H"；而在p标签内的内容后面会被插入一个:after伪元素，该元素包含的内容是"d"。
上面只是简单的入门这两者元素之间的简单格式运用，下面来看看平常该怎么使用它们。
结合border写个对话框样式
首先要实现对话框，先来实现border画三角形样式
<style>
.triangle{
width: 0;
height: 0;
border:50px solid transparent;
border-top-color: black;
}
</style>
<div class="triangle"></div>
得到了一个顶部方向向下的三角形
接下来我们加上:before和:after：
<style>
.test-div{
position: relative;
width:150px;
height: 36px;
border:1px solid black;
border-radius:5px;
background: rgba(245,245,245,1)
}
.test-div:before,.test-div:after{
content: "";
display: block;
position: absolute;
top:8px;
width: 0;
height: 0;
border:6px solid transparent;
}
.test-div:before{
left:-11px;
border-right-color: rgba(245,245,245,1);
z-index:1
}
.test-div:after{
left:-12px;
border-right-color: rgba(0,0,0,1);
z-index: 0
}
</style>
<div class="test-div"></div>
效果如下：
运用伪元素就能做出一个对话框图形出来了，当然运用:before和:after还能更方便的制作出很多效果，下节再讲解讲解！