利用:before和:after给段落添加效果的应用实例

效果1：

<span class="zy-jt">现场施工安装，1对1管家式服务，基础施工/屏体安装</span>

.zy-jt:before{
content: "";
display: inline-block;
background: url(../images/mic1.png) no-repeat -5px;
width: 56px;
height: 8px;
vertical-align: middle;
}
.zy-jt:after {
content: "";
display: inline-block;
background: url(../images/mic2.png) no-repeat 5px;
width: 56px;
height: 8px;
vertical-align: middle;
}

效果2：

<i class="line"></i>

.line {
width: 50px;
height: 2px;
background: #ff0000;
display: block;
margin: 20px 0;
position: relative;
}
.line:before {
right: -8px;
}
.line:after {
right: -15px;
}
.line:before,.line:after {
content: "";
width: 2px;
height: 2px;
background: #ff0000;
display: block;
position: absolute;
}