[CSS] 用伪元素:after实现分割线和气泡

学习前端网页开发并将其应用于工作中已经两个月了，发现前端包括的内容真的是无比丰富，知识量巨大……漫漫长路远，尚需艰苦努力。作为一只前端开发的菜鸟，写不了特别深刻的关于前端技术性文章，只是想将工作中遇到比较有意思的内容收集整理一下，理解一下，分享一下，希望对自己有所帮助，如果也能给读者带来一些帮助和启发，将不甚荣幸……闲话少说，进入正题。

在网页设计中显示分割线可以使用元素的border单边显示即可，但是这种方法会增大元素的长度或者宽度，在元素需要精细计算以便达到布局效果的情况下，添加border往往会打乱布局。比如下面的html代码，想实现两个horizontal-cell的div水平排列，并且各占父节点的50%的宽度，并且中间要添加分割线。

    
分割线
    
显示分割线

如果我们只是简单在separator类的样式的中添加border-left 属性，虽然也添加了分割线，但是会影响两个horizontal-cell类的div布局将会从横向变成纵向，打乱了布局。为解决这个问题，可以使用伪元素:after，css代码如下：

/*两个元素各占50%的宽度在水平方向显示，添加分割线*/
.horizontal-cell{
    float: left;    
    width: 50%;    
    background: light green;
}
.separator{   
    position: relative;
}
.separator:after{    
   position: absolute;    
   top:0.1em;    
   height: calc(100% - 0.2em);    
   left:0;    
   content: '';    
   width:0;    
   border-left: solid  darkblue 1px;
}

分割线效果图.png

.separator:after 伪元素会浮在horizontal-cell类的元素之上，不会挤用横向的空间，.separator:after中用border-left属性来实现竖直分割线的显示。我们也可以用同样的方法实现水平的分割线。

用类似的方法我们也可以在垂直排列的内部文字需要对齐的列表上打标记。html代码和相应的css代码如下：

    
不带mark 的 cell0
    
带mark 的 cell0(使用:after伪元素方法)
    
带mark 的 cell0(不使用:after伪元素方法，直接用css属性border)

/*前置色块标记*/
.cell0{    
      padding-left: 1.2em;    
      background: lightgrey;    
      text-align: left;
}
.mark {    
      position: relative;
}
.mark:after{    
      position: absolute;    
      top:0;    
      height: 100%;    
      left:0;    
      content: '';    
      width:0;    
      border-left: solid  #5dd7bf 0.6em;
}
.left-border{    
      border-left: solid  #5dd7bf 0.6em;
}

效果图如下：

加标记效果图.png

效果图中第三行的样式没有使用:after，与第二行对比可以看出，虽然也加了标记，但是却没有与第一行中的文本进行对齐。

:after除了实现分割线、标记色块，还有一个非常有用的应用就是实现类似手机对话框的气泡，可以看如下代码：

箭头指向左边的气泡
箭头指向右边的气泡
箭头指向上边的气泡
箭头指向下边的气泡

/*气泡相关，可以用于显示对话框等等*/
.bubble{    
    position: relative;    
    padding: 0.75em;    
    color: #ffffff;    
    font-size: 0.9em;    
    line-height: 1.3em;    
    text-align: left;    
    border-radius: 0.5em;    
    margin-left: 3.6em;    
    margin-top: 1.2em;    
    margin-bottom: 1.2em;    
    margin-right: 5.2em;    
    float: left;    
    background-color: #60d8ce;    
    height: 4em;
}
.bubble:after {    
    content: '';    
    position: absolute;    
    width: 0;    
    height: 0;    
    border: 15px solid rgba(0, 0, 0, 0);    
    border-left-width: 0;
}
.bubble-left:after {    
    border-right-color: #60d8ce;    
    top: 0%;    
    right: 100%;    
    margin-top: 0.9em;    
    border-left-width: 0.0em;    
    border-right-width: 0.6em;    
    border-bottom-width: 0.4em;    
    border-top-width: 0.4em;
}
.bubble-right:after {    
    border-left-color: #60d8ce;    
    top: 0%;    left: 100%;    
    margin-top: 0.9em;    
    border-right-width: 0.0em;    
    border-left-width: 0.6em;    
    border-bottom-width: 0.4em;    
    border-top-width: 0.4em;
}
.bubble-top:after {    
    border-bottom-color: #60d8ce;    
    left: 0%;    
    bottom: 100%;    
    margin-left: 1.9em;    
    border-top-width: 0.0em;    
    border-bottom-width: 0.6em;    
    border-left-width: 0.4em;    
    border-right-width: 0.4em;
}
.bubble-bottom:after {    
    border-top-color: #60d8ce;    
    left: 0%;    
    top: 100%;    
    margin-left: 1.9em;    
    border-bottom-width: 0.0em;    
    border-top-width: 0.6em;    
    border-left-width: 0.4em;    
    border-right-width: 0.4em;
}

气泡箭头部分的实现与之前例子中的分割线类似，都是用伪元素:after 的border的宽度和颜色透明与否来实现长方形或者三角形箭头的形状，然后通过left、right、top、bottom等等属性调整:after伪元素与圆角对话框元素的相对位置，来实现气泡的形状。

气泡效果图.png

综合来看，以上所提到伪元素:after来实现分割线和气泡，方法是类似的，关键点是元素的CSS的position属性要设置成relative，而与之相应的:after伪元素（用来形成三角形或者矩形）的position属性要设置成absolute，这样:after伪元素才能够调整与元素的相对位置，然后改变:after伪元素的展现的形状，从而实现分割线、标记和气泡等效果。

由于是前端开发的菜鸟，以上关于伪元素:after的应用只是提到了一点皮毛，只是做一点小小的归纳，希望随着自己学习的深入，以后关于前端的技术文章能写得更加深入。以上贴出来的代码部分，已经比较完整，复制粘贴到工程里，完全可以实现以上效果图显示的效果。完整源码下载