HTML中：after和：before的作⽤及使⽤⽅法（转）
1.  :before 和 :after 的主要作⽤是在元素内容前后加上指定内容，⽰例：
HTML代码：
<p>你好</p>
CSS代码：
p:before{
content: 'Hello';
color: red;
}
p:after{
content: 'Tom';
color: red;
}
效果如图：
以上代码是:before和:after的基本⽤法，但是这两种伪类还有很多更⽅便的⽤法。
2. ：after清除浮动
元素设置浮动以后，其⽗元素以及⽗元素的兄弟元素的布局都会受到影响，如⽗元素的背景边框不能正常显⽰，⽗元素的兄弟元素位置布局错误等，
为了避免这种浮动带来的影响必须要清除浮动，:after就是其中的⼀种⽅法。
CSS代码：
ul:after{
content: '';
display: block;
width: 0;
height: 0;
clear: both;
}
3. :before和:after ⽤来写⼩三⾓形
在⽇常的⼯作中会经常遇到⼩三⾓形这样的⼩图标，可以⽤添加图⽚的⽅式实现，但是更⽅便的是⽤:after  :before伪类来实现。
HTML代码：
<div class="demo">这是⼀个测试</div>
CSS代码：
.demo:after{
content: '';
display: inline-block;
width: 0;
height: 0;
border: 8px solid transparent;
border-left: 8px solid #AFABAB;
position: relative;
top: 2px;
left: 10px;
}
效果如图所⽰：
这样就可以在⽂字后⾯添加⼀个⼩三⾓形啦，是不是很⽅便
4. ⽤:after和:before 写⼀个对话框
HTML代码：
<div class="left">
<p>吃了吗</p>
html网页边框代码</div>
<div class="right">
<p>吃过了，吃了红烧排⾻和酸菜鱼</p>
</div>
CSS代码：
.left,.right{
min-height: 40px;
position: relative;
display: table;
text-align: center;
border-radius: 7px;
background-color: #9EEA6A;
}
.right{      /*使左右的对话框分开*/
top: 40px;
left: 60px;
}
.left > p,.right > p{    /*使内容居中*/
display: table-cell;
vertical-align: middle;
padding: 0 10px;
}
.left:before,.right:after{  /*⽤伪类写出⼩三⾓形*/
content: '';
display: block;
width: 0;
height: 0;
border: 8px solid transparent;
position: absolute;
top: 11px;
}
/*分别给左右两边的⼩三⾓形定位*/
.left:before{
border-right: 8px solid #9EEA6A;
left: -16px;
}
.right:after{
border-left: 8px solid #9EEA6A;
right: -16px;
}
效果如图所⽰
上⾯的对话框是模仿的样式写的，⽤:before和:after写很⽅便哦5.  下⾯写⼀个带边框的对话框，⼀个对话会同时⽤到:before和:after      HTML代码不变
CSS代码：
.left,.right{
min-height: 40px;
position: relative;
display: table;
text-align: center;
border-radius: 7px;
background-color: #9EEA6A;
border: 1px solid #736262;
}
.right{      /*使左右的对话框分开*/
top: 40px;
left: 60px;
}
.left > p,.right > p{    /*使内容居中*/
display: table-cell;
vertical-align: middle;
padding: 0 10px;
}
.left:before,.right:after,.left:after,.right:before{  /*⽤伪类写出⼩三⾓形*/
content: '';
display: block;
width: 0;
height: 0;
border: 8px solid transparent;
position: absolute;
top: 11px;
}
/*分别给左右两边的⼩三⾓形定位*/
.left:before{
border-right: 8px solid #9EEA6A;
left: -16px;
}
.left:after{      /*左边对话框⼩三⾓形的边框样式*/    border-right: 8px solid #736262;
left: -17px;
z-index: -1;
}
.right:after{
border-left: 8px solid #9EEA6A;
right: -16px;
}
.right:before{    /*右边对话框⼩三⾓形的边框样式*/    border-left: 8px solid #736262;
right: -17px;
z-index: -1;
}
效果如图所⽰：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。