伪元素写竖线_[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;

}

.separat