CSS 偽元素 ::before 與 ::after：用樣式產生內容
在某元素或選取器後面使用 ::，再接續 before、after，即可完成選取器的撰寫。接下來，必須在規則中加入 content 屬性，其屬性值可使用 '' 或 "" 來產生字串。這樣一來，即可完成在指定的元素內容之前插入內容。
屬性
::before、::after偽元素必須指定content屬性，否則不會顯示任何內容。- 產生出來的虛擬元素為 inline 的特性，故無法正常控制寬、高、行距。
- 有關 SEO 的內容，不應該放在
content內。 - 可減少 HTML 的標籤數量；相對地，也加重了瀏覽器的渲染區域。
屬性值
url()
連結影像來源。
attr()
讀取該元素的屬性。
常見用法
css
/* 必填欄位標上紅色星號 */
.required::after {
content: "*";
color: #dc2626;
margin-left: 4px;
}
/* 外部連結補上圖示 */
a[target="_blank"]::after {
content: " ↗";
}
/* 清除浮動 */
.clearfix::after {
content: "";
display: block;
clear: both;
}第三個例子是 浮動排版 時代最常見的技巧，靠一個看不見的偽元素撐開高度。
想設定寬高
偽元素預設是行內特性，要先改變 外觀顯示：
css
.card::before {
content: "";
display: block;
width: 40px;
height: 4px;
background: #2965f1;
}常見問題
為什麼偽元素沒有顯示出來？
最常見的原因是漏了 content 屬性。就算不需要文字，也要寫成 content: ""，偽元素才會被建立出來。
偽元素可以設定寬高嗎？
預設是行內特性，寬高不會生效。把 display 改成 block 或 inline-block 之後就能正常設定。
偽元素的內容會被搜尋引擎讀到嗎？
不會被視為頁面內容，也無法被複製或被多數輔助工具讀出。它只適合放裝飾性的符號與圖形，真正的資訊要寫在 HTML 裡。
單冒號和雙冒號有什麼差別？
雙冒號是現行規範用來區分偽元素與 偽類 的寫法，單冒號則是舊語法。瀏覽器兩種都吃，但新的程式碼請一律用雙冒號。
