: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如下：

  


    分类1

  
  


    分类2

  

  


    分类3

  

效果如下：

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如下

    

        1
        流程1
    
 
    

        2
        流程2
    
    

            3
        流程3
    
    

      4
      流程4
    

效果如下：

image

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