::before与::after使用方法详解

随着css3的流行，许多朋友在做网页设计的时候，都为了减少无规律的背景图片布局，都会使用css3中的::before与::after进行页面布局，那么究竟::before与::after两者有和含义，::before与::after这两者的使用方法是什么，都是一大困惑，今天互补网来为大家讲解写这两个也样式的使用方法。

通常我们在布局这一块的时候，文字两段的图片使用传统css布局的话，会将整个图标作为一个背景图，然后中间插入文字，css设置居中，但是这样的话由于文字长度的不一致，会导致我们需要创建多个背景图，如果我们使用::before与::after即可用css样式控制，就不用单独的做很多个背景图。

html代码

<div class="sirendz_title"><b>私人定制</b><span>每一套网站模板，都属于独一无二的智慧结晶。</span></div>

CSS代码预览

.sirendz_title b::before {
    content: url(左侧图片路劲);
    float: left;
    display: block;
    width: 50px;
    margin-top: 22px;
    height: 7px;
}
.sirendz_title b::after {
    content: url(右侧图片路劲);
    margin-top: 22px;
    float: right;
    display: block;
    width: 50px;
    height: 7px;
}