css的before和after应用的两个例子

　　在做网站的时候，我们经常应用一个数据块，进一步而言加横线的方式

　　这两种效果，其实用别的方式也能做，但是可能稍微要复杂点，我们如果用css的before和after来做的话就显得非常简单了，

　　首先种的代码如下：

　　.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%;}