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

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

<div class="content">
<div class="horizontal-cell" >分割线</div>
<div class="horizontal-cell separator">显示分割线</div>
</div>

如果我们只是简单在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代码如下：

<div class="content">
<div class="cell0 " >不带mark 的 cell0</div>
<div class="cell0 mark" >带mark 的 cell0(使用:after伪元素方法)</div>
<div class="cell0 left-border" >带mark 的 cell0(不使用:after伪元素方法，直接用css属性border)</div>
</div>

/*前置色块标记*/
.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除了实现分割线、标记色块，还有一个非常有用的应用就是实现类似手机对话框的气泡，可以看如下代码：

<div class="bubble bubble-left">箭头指向左边的气泡</div>
<div class="bubble bubble-right">箭头指向右边的气泡</div>
<div class="bubble bubble-top">箭头指向上边的气泡</div>
<div class="bubble bubble-bottom">箭头指向下边的气泡</div>

/*气泡相关，可以用于显示对话框等等*/
.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伪元素的展现的形状，从而实现分割线、标记和气泡等效果。