CSS Selector - ::before & ::after

在某元素或選取器後面使用 ::，再接續 before、after，即可完成選取器的撰寫。接下來，必須在規則中加入 content 屬性，其屬性值可使用 '' 或 "" 來產生字串。這樣一來，即可完成在指定的元素內容之前插入內容。

屬性

• ::before、::after 偽元素必須指定 content 屬性，否則不會顯示任何內容。
• 產生出來的虛擬元素為 inline 的特性，故無法正常控制寬、高、行距。
• 有關 SEO 的內容，不應該放在 content 內。
• 可減少 HTML 的標籤數量；相對地，也加重了瀏覽器的渲染區域。

屬性值

url()

連結影像來源。

attr()

讀取該元素的屬性。