:before和:after作为伪元素，用于在某个元素之前或之后插入某些内容
举个例子

<style>
p:before{
content: "H"
}
p:after{
content: "d"
}
</style>
<p>ello Worl</p>

则输出的显示仍然是"hello world"

审查元素可以发现

<p>
::before
"ello Worl"
::after
</p>

1.结合border写个对话框的样式

怎样用border画三角形

<style>
.triangle{
width: 0;
height: 0;
border-left:50px solid red;
border-bottom:50px solid blue;
border-top:50px solid black;
border-right:50px solid purple
}
</style>
<div class="triangle"></div>

此时会显示一个正方形，中间含有四个三角形
应该要进行修改

2017-03-05 18-11-02屏幕截图.png

.triangle{
width: 0;
height: 0;
border:50px transparent solid; /这里我们将元素的边框宽度设置为50px，transparent表示边框颜色是透明的，solid表示边框是实线的/
border-top-color: black; /这里我们仅将上边框的颜色设置为黑色，众所周知，css后面的样式代码会覆盖之前的相同的样式代码，至于其他三边的还是透明色/
/border-bottom-color: black; //这里设置底部边框色为黑色
border-left-color: black; //这里设置左边边框色为黑色
border-right-color:black //这里设置右边边框色为黑色/
}

效果:上部的样式覆盖了透明，其余三部仍为透明

2017-03-05 18-26-23屏幕截图.png

然后加上before:

.test-div{
position: relative; /日常相对定位/
width:150px;
height:36px;
border-radius:5px;
border:black 1px solid;
background: rgba(245,245,245,1)
}
.test-div:before{
content: ""; /:before和:after必带技能，重要性为满5颗星/
display: block;
position: absolute; /日常绝对定位/
top:8px;
width: 0;
height: 0;
border:6px transparent solid;
left:-12px;
border-right-color: rgba(０,245,245,1);
}

效果：三角形图标没有边框

对话框０.png

使用了after之后：

.test-div{
position: relative; /日常相对定位/
width:150px;
height: 36px;
border:black 1px solid;
border-radius:5px;
background: rgba(245,245,245,1)
}
.test-div:before,.test-div:after{
content: ""; /:before和:after必带技能，重要性为满5颗星/
display: block;
position: absolute; /日常绝对定位/
top:8px;
width: 0;
height: 0;
border:6px transparent solid;
}
.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
}

实质上是利用了前后两次的一个位移差，使得只显示出一个边线

对话框.png

2.作为内容的半透明背景层

body{
background: url(img/1.jpg) no-repeat left top /这里本兽加了个图片背景，用以区分背景的半透明及内容的完全不透明/
}
.test-div{
position: relative; /日常相对定位(重要，下面内容也会介绍)/
width:300px;
height: 120px;
padding: 20px 10px;
font-weight: bold;
}
.test-div:before{
position: absolute; /日常绝对定位(重要，下面内容也会略带介绍)/
content: ""; /:before和:after必带技能，重要性为满5颗星/
top:0;
left: 0;
width: 100%; /和内容一样的宽度/
height: 100%; /和内容一样的高度/
background: rgba(255,255,255,.5); /给定背景白色，透明度50%/
z-index:-1

透明.png