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

你可能感兴趣的:(伪元素写竖线)