※ 偽元素：
- 針對某個元素的特定部分進行樣式設定，而不需要在 HTML 中新增額外的標籤。
- 常見的區塊元素像 <div>, <p>, <span>, <button>, <section> 等都可以使用。
- 偽元素常用於加上裝飾、圖示、引號等視覺效果，並常搭配 content 屬性與定位（position）來製作 tooltip、按鈕特效、卡片陰影等互動或美化效果。
範例：
偽元素產生方法：
- 在
.box這個元素前面插入「123」。 - 在
.box這個元素後面插入「456」。 - 這些文字會出現在
.box顯示的內容左右兩側，但實際上並不會改動 HTML 中.box的內文。
畫面顯示：
wrapper偽元素產生方法：
畫面顯示：
.wrapper :before 和.wrapper:before 的差別：
.wrapper:before ：選中的是 class 為 .wrapper的元素，然後在它的前方插入偽元素。
.wrapper :before ：
- 選中的是
.wrapper裡面所有元素的::before（例如.wrapper裡的 <p>、<div>只要有::before都會被影響）。 - 空格表示「後代選擇器」，所以範圍大很多。
畫面顯示：
※ 偽元素的特性：
※ 偽類選擇器：
:hover：
.box:hover {
background-color: blue;
}
畫面顯示：
:active：
.box:active{
background-color: green;
}
畫面顯示：
綜合使用：
.box:hover:after{
background-color: orange;
}
畫面顯示：
