以前沒怎麼覺得，但最近頻繁的用div去使用一些“無傷大雅”的分割線、包裹圈之類的東西。今天恰好翻開了曾經學習過的“僞元素”這一章。不覺慚愧，寫此文章記錄一下。
什麼是僞元素
首先，僞元素是一個元素的子元素 ，并且 是inline行内元素 。
僞元素最常用的也就before和after兩個。
我們加上之後，在浏覽器中檢視，發現對于一個标簽的before成了這個标簽的第一個子元素，而after成為了它的最後一個子元素。
但是，僞元素是“僞”的。 也就是說，你沒有辦法用JS去對它進行增、删、改、查。
那我們就高興了，因為回想起學js的知識，這就說明：僞元素不屬于HTML頁面 ！
你可以用僞元素造成視覺上的效果，又不會增加JS查詢DOM的負擔（也就是說，即使你給頁面加了很多僞元素，也不會影響DOM查詢的效率），何樂而不為呢？
僞元素還常被用來“清除浮動” ，即我們常說的：父元素
clear: both;
（雖然這種方法優缺點，但是足夠适合絕大多數适用場景）
如：
.clearfix:after {
content: "";
display:table;
clear:both;
} 哦，對了。因為它不是一個實際的HTML标簽，還可以加快浏覽器加載HTML檔案。（對SEO也是有幫助的）
僞元素的應用
在我所做的項目（前端）中，有一屏我把他設定為“聆聽音樂”環節，标題中就運用了僞元素：
由于滑鼠移入後會翻轉，是以前後兩條線的位置就 “至關重要” 了。
開始我想到：用前後兩個div，隻顯示border-top或border-bottom來達到效果，但是總的來說，不盡如人意。還會增加CSSOM樹的渲染。
所幸今天翻到了 僞元素 ，對！用僞元素設定後，還可以把中間的div和他們“綁定起來”，有一定的好處。說幹就幹：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D頭</title>
<style>
body,figure {
margin: 0;
padding: 0;
}
.stage {
width: 40%;
height: 60px;
perspective: 1000px;
cursor: pointer;
float: left;
transform: translateX(70%);
}
.stage .flipBox {
width: 47%;
height: 60px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.65s;
margin-left: 29%;
text-align: center;
}
.flipBox .pic {
width: 100%;
height: 60px;
font-weight: bolder;
line-height: 60px;
position: absolute;
backface-visibility: hidden;
}
.pic.front {
font-size: 1.5rem;
color: #202020;
}
.pic.back {
color: #FF0000;
font-size: 0.95rem;
transform: rotateX(180deg);
}
.stage:hover .flipBox {
transform: rotateX(180deg);
}
.flipBox:after,.flipBox:before{
content: "";
position: absolute;
top: 30px;
height: 1px;
background: #ccc;
width: 333px;
}
.flipBox:after{
right: 99%;
}
.flipBox:before{
left: 99%;
}
</style>
</head>
<body>
<div class="stage">
<div class="flipBox">
<figure class="pic front">Music時刻</figure>
<figure class="pic back">此時此刻，非我莫屬</figure>
</div>
</div>
</body>
</html> 其實，兩個僞元素的位置是重點：開始我把left和right都分别設為0，就好玩了：他們兩條線重疊在一起，蓋住後面的字了。搞得我還以為是位置弄錯了。。。（其實都差不多）
亦或者是，僞元素其實和文本相關？
做了下驗證：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>驗證僞元素</title>
<style>
.or{
text-align: center;
}
.or:after,
.or:before{
content: "";
/* 前面說僞元素是inline，加了absolute定位之後，會被強制轉為塊級元素 */
position: absolute;
top: 12px;
height: 1px;
background: red;
width: 120px;
}
.or:after{
right: 0;
}
.or:before{
left: 0;
}
</style>
</head>
<body>
<p class="or">or</p>
</body>
</html>