:before和:after的用法

css中的伪类:before和:after，意思是在指定元素的前后增加一些指定的内容，在这里，我主要介绍元素前后画线的效果。

1、元素下画线

css如下：

.flex-wrap { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: -webkit-box; 
    display: -ms-box; 
    display: box; 
    display: flex; 
}
.flex-con { 
    -webkit-box-flex: 1; 
    -ms-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    box-flex: 1; 
    flex: 1; 
}
.flex-vertical { 
    -webkit-box-orient: vertical; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    -webkit-flex-flow: column; 
    -flex-direction: column; 
    flex-flow: column; 
}
.tab-wrap{
    height:60px;
    text-align: center;
}
.tab-wrap .tab-item{
    height:60px;
}
.tab-wrap .tab-item span{
    display: inline-block;
    height:60px;
    line-height:60px;
    font-size:16px;
    color:#666;
    position:relative;
}
.tab-wrap .tab-item.active span{
    color:red;
}
.tab-wrap .tab-item.active span:after{
    content:'';
    width:100%;
    height:4px;
    background-color:red;
    position:absolute;
    bottom:4px;
    left:0;
}

html如下：

<div class="tab-wrap flex-wrap">

  <div class="tab-item flex-con active">

    <span>分类1</span>

  </div>
  <div class="tab-item flex-con active">

    <span>分类2</span>

  </div>

  <div class="tab-item flex-con">

    <span>分类3</span>

  </div>

</div>

效果如下：

image

2、元素左右画线
css如下：

.process .item{
    padding:20px 0;
    position:relative;
}
.process .num{
    display: inline-block;
    width:30px;
    height:30px;
    text-align: center;
    line-height:30px;
    color:#fff;
    background-color:#3291F2;
    box-sizing:0;
    border:1px solid #fff;
    border-radius:50%;
    position:relative;
    z-index:2;
}
.process .text{
    padding-left:18px;
}
.process .item:before,.process .item:after{
    content:'';
    height:50%;
    width:2px;
    background-color:#3291F2;
    position:absolute;
    left:15px;
    z-index:1;
}
.process .item:before{
    bottom:0;
}
.process .item:after{
    top:0;
}
.process .item:last-child:before{
    height:0;
}
.process .item:first-child:after{
    height:0;
}

html如下

<div class="process">
    <div class="item">
        <span class="num">1</span>
        <span class="text">流程1</span>
    </div> 
    <div class="item">
        <span class="num">2</span>
        <span class="text">流程2</span>
    </div>
    <div class="item">
            <span class="num">3</span>
        <span class="text">流程3</span>
    </div>
    <div class="item">
      <span class="num">4</span>
      <span class="text">流程4</span>
    </div>
</div>

效果如下：

image

:before和:after可以实现很多效果，之后可以一一探讨~