在寫六角切版直播班第一周作業的時候，發現自己對於 偽元素 ( Pseudo Element ) 的觀念還很不足，趁著這次的作業把這偽元素惡補了一下。
順便附上切版直播班第一周上課筆記的連結
在寫功課之前有先看一下卡斯伯老師的 CSS沒有極限 — 別忘了偽元素 以及直播班同學寫的 TimeLine 範例做參考。
偽元素 (Pseudo-Element) 與 偽類 (Pseudo-classes)
對我來說，偽元素跟偽類太容易搞混了，所以想趁這次研究偽元素時也將偽類學起來。
偽類 ( Pseudo-classes )
偽類使用符號為 :
偽類 ( Pseudo-classes ) : 不屬於元素，因此不會出現在 DOM tree 上，在特殊狀態下被選取的話，會作為關鍵字被加到選擇器裡面主要是用來定義元素的特殊狀態。
MDN 列出的偽類目錄
其實偽類很常見，像是 :hover 就常常被使用。:hover 可以讓滑鼠停在某個元素時，套用指定的樣式。
偽元素 ( Pseudo Element )
偽元素使用符號為 ::
偽元素 ( Pseudo Element ) : 屬於元素( Element )，所以會出現在 DOM tree 上，主要是用來做被選擇元素的特定部分樣式修改。
MDN 列出的偽元素索引
使用
::before創建偽元素，其將成為被選中元素的 first child。
使用
::after創建偽元素，其將成為被選中元素的 last child。
使用偽元素的時機
使用偽元素可以讓 HTML 、 CSS 的程式碼看起來更乾淨一些( 優化 )，不需要一直重複使用 div 來做版型。如果都統一寫在同一個 class 上，效果透果 before 跟 after 做出來就好了。
優點可以在檢視程式碼時，更舒適、乾淨。
after & before
可以將 before 跟 after 想像成隱藏的 div ，可以協助排版，不需要為了完成一個效果寫了一堆 HTML 標籤，讀取上也會比較順。
TimeLine 寫法
TimeLine 範例:
HTML :
<div class="container">
<ul class="time">
<li class="edu timeline">2019</li>
<li class="edu timeline">2020</li>
<li class="edu timeline">2021</li>
<li class="edu timeline">2022</li>
</ul>
</div>CSS :
/* 有使用 css reset */*{
box-sizing: border-box;
}.container{
margin: 0 auto;
max-width: 800px;
padding: 16px 0 16px 0;
}
/* 1. 以 ul 作為定位點*/
.time{
position: relative;
/* 讓偽元素以 ul 作為定位點，因此 ul 需要設定為「相對位置」 */
}
/* 2. li margin-bottom */
.edu{
margin-bottom: 32px;
}
/* 3. 利用偽元素做圓點*/
.edu::before{ /*前方偽元素*/
content: "";
/*產生一個空的元素，偽元素使用不能少的步驟*/
position: absolute;
/* 偽元素需設定成「絕對位置」 */
width: 16px; /*圓點寬*/
height: 16px;/*圓點高*/
background-color: #96A9C4; /*圓點 color*/
border-radius: 50%; /*圓*/
left: -32px; /*圓點本來覆蓋在 li 上*/
}
/* 4. 利用偽元素做線*/.timeline::after{ /*後方偽元素*/
content: "";
/*產生一個空的元素，偽元素使用不能少的步驟*/
position: absolute;
/* 偽元素需設定成「絕對位置」 */
border-left: 1px solid #96A9C4;
/* 一定要加上 top, bottom 的值，線條才會有高度 */
top: 0px;
bottom: 0px;
/* 設定 top 0px, bottom 0px 就會剛好撐滿整個 ul 的高度 */
left: -24px;
/* 為了要讓線條對準圓心，因此需往左 16px（圓圈和文字之間的距離）+ 8px（圓圈的半徑）= 24px */
}
TimeLine 小筆記
定位點 : 讓偽元素以 <ul> 作為定位點，因此 <ul> 需要設定為相對位置 relative。
直線：利用 ::after的繼承特性，來繼承原本 timeline 元素的屬性，畫出一個與空間一樣高的元素。定義出偽元素邊框，才能產生直線效果。使用絕對定位 absolute，是為了讓直線定位在中間。
時間圓圈：利用::before繪製出，以 li 中的時間文字作為定位參考，使用絕對定位absolute讓兩邊位置呈水平對齊。
