css的before和after应用的两个例子
更新时间：2014-12-15 16:18
标签：css
阅读次数：
在做网站的时候，我们经常应用一个数据块，然后加横线的方式，看截图
或者：
这两种效果，其实用别的方式也能做，但是可能稍微要复杂点，我们如果用css的before和after来做的话就显得非常简单了，
第一种的代码如下：
<style>
.px-group-divider {
overflow: hidden;
font-size:28px;
color:red;
margin: 1.7em 0;
}
.px-group-divider::after {
left: 1.0em;
margin-right: -100%;
background-color: #e5e5e5;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 100%;
}第二种代码：
.px-group-divider {
overflow: hidden;
text-align: center;
color: #999999;
margin: 1.7em 0;
}
.px-group-divider:before {
right: 2.0em;
margin-left: -50%;
}
.px-group-divider:after {
left: 2.0em;
margin-right: -50%;
}
.px-group-divider:before, .px-group-divider:after {
background-color: #e5e5e5;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}