學(xué)習(xí)前端網(wǎng)頁開發(fā)并將其應(yīng)用于工作中已經(jīng)兩個月了，發(fā)現(xiàn)前端包括的內(nèi)容真的是無比豐富，知識量巨大……漫漫長路遠，尚需艱苦努力。作為一只前端開發(fā)的菜鳥，寫不了特別深刻的關(guān)于前端技術(shù)性文章，只是想將工作中遇到比較有意思的內(nèi)容收集整理一下，理解一下，分享一下，希望對自己有所幫助，如果也能給讀者帶來一些幫助和啟發(fā)，將不甚榮幸……閑話少說，進入正題。
在網(wǎng)頁設(shè)計中顯示分割線可以使用元素的border單邊顯示即可，但是這種方法會增大元素的長度或者寬度，在元素需要精細計算以便達到布局效果的情況下，添加border往往會打亂布局。比如下面的html代碼，想實現(xiàn)兩個horizontal-cell的div水平排列，并且各占父節(jié)點的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;
}
.separator:after 偽元素會浮在horizontal-cell類的元素之上，不會擠用橫向的空間，.separator:after中用border-left屬性來實現(xiàn)豎直分割線的顯示。我們也可以用同樣的方法實現(xiàn)水平的分割線。
用類似的方法我們也可以在垂直排列的內(nèi)部文字需要對齊的列表上打標(biāo)記。html代碼和相應(yīng)的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>
/*前置色塊標(biāo)記*/
.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;
}
效果圖如下：
效果圖中第三行的樣式?jīng)]有使用:after，與第二行對比可以看出，雖然也加了標(biāo)記，但是卻沒有與第一行中的文本進行對齊。
:after除了實現(xiàn)分割線、標(biāo)記色塊，還有一個非常有用的應(yīng)用就是實現(xiàn)類似手機對話框的氣泡，可以看如下代碼：
<div class="bubble bubble-left">箭頭指向左邊的氣泡</div>
<div class="bubble bubble-right">箭頭指向右邊的氣泡</div>
<div class="bubble bubble-top">箭頭指向上邊的氣泡</div>
<div class="bubble bubble-bottom">箭頭指向下邊的氣泡</div>
/*氣泡相關(guān)，可以用于顯示對話框等等*/
.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;
}
氣泡箭頭部分的實現(xiàn)與之前例子中的分割線類似，都是用偽元素:after 的border的寬度和顏色透明與否來實現(xiàn)長方形或者三角形箭頭的形狀，然后通過left、right、top、bottom等等屬性調(diào)整:after偽元素與圓角對話框元素的相對位置，來實現(xiàn)氣泡的形狀。
綜合來看，以上所提到偽元素:after來實現(xiàn)分割線和氣泡，方法是類似的，關(guān)鍵點是元素的CSS的position屬性要設(shè)置成relative，而與之相應(yīng)的:after偽元素（用來形成三角形或者矩形）的position屬性要設(shè)置成absolute，這樣:after偽元素才能夠調(diào)整與元素的相對位置，然后改變:after偽元素的展現(xiàn)的形狀，從而實現(xiàn)分割線、標(biāo)記和氣泡等效果。
由于是前端開發(fā)的菜鳥，以上關(guān)于偽元素:after的應(yīng)用只是提到了一點皮毛，只是做一點小小的歸納，希望隨著自己學(xué)習(xí)的深入，以后關(guān)于前端的技術(shù)文章能寫得更加深入。以上貼出來的代碼部分，已經(jīng)比較完整，復(fù)制粘貼到工程里，完全可以實現(xiàn)以上效果圖顯示的效果。完整源碼下載
