: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>
此时会显示一个正方形，中间含有四个三角形
应该要进行修改
.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 //这里设置右边边框色为黑色/
}
效果:上部的样式覆盖了透明，其余三部仍为透明
然后加上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);
}
效果：三角形图标没有边框
使用了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
}
实质上是利用了前后两次的一个位移差，使得只显示出一个边线
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
