CSS Style - :before, :after

:before, :after 是偽元素的成員，在指定的 HTML 元素使用，可額外增加 2 個容器 (如下圖所示)，當偽元素存在時，可以像一般的元素加上任何 css 屬性達到樣式目的，如同嵌套樣式，卻不需要寫在 HTML 文件裡，增加修改樣式的彈性。

圖檔來源 Multiple Backgrounds and Borders with CSS 2.1

特性

1. 需有 content 屬性(內容可為空值)才有效。
2. display 預設值為 inline。
3. 可插入內容的元素才可以使用，所以使用在 <img>, <input>, <textarea>, <iframe>等元素不會生效。

如何使用

CSS 可以用雙冒號或單冒號表示，基本上這 2 種表示法在目前瀏覽器都支援。p.s. CSS3 是用雙冒號表示偽元素(pseudo element)，單冒號表示偽類(pseudo class)。

/* before 出現在 div 元素內容的最前面 */
div::before {
    content: "";
}
/* after 出現在 div 元素內容的最後面 */
div::after {
    content: "";
}

• 在 content 加入任何文字

/* 顯示"★"，建議轉為 CSS Entity "\2605"，避免亂碼 */
div::before {
    content: "\2605";
}

CSS Entity 線上轉換器 https://www.evotech.net/articles/testjsentities.html

• 呈現 html 屬性或自訂屬性(data-)的內容

/* 顯示自訂屬性 data-order 的內容 */
div::before {
    content: attr(data-order);
}
/* 顯示屬性 title 的內容 */
div::before {
    content: attr(title);
}

• 使用 URL 放置圖片

div::before {
  content: url(圖檔網址);
}
/* 支援多張圖檔，以空白隔開 */
div::before {
  content: url(圖檔網址) url(圖檔網址);
}

• icon font 使用
  以 Font Awesome 為例，將 icon 代碼放在指定元素內。

div::before {
  content: "\f6be";
  font-family: "FontAwesome";
}

• 不指定 content 內容，當作區塊使用

div::before {
  content: "";
  display: block;
}

心得

第一次遇到偽元素是看到其他人分享清除浮動的方法，以上各種用法可以有更多的變化，這是我認為 :before 與 :after 相當好用的原因。例如遇到 icon 切版，如使用背景處理，無法顯示在列印畫面(預設值)，改為偽元素則可避免此問題，使用上又與一般元素差不多，可減少 html 代碼，有時候少寫幾個<div>，看起來就更優雅簡潔了。

缺點：網頁無法選取，如用於一般內容文字，會造成選取破碎，無法完整複製內容，建議切版時還是以內容為優先，再決定樣式的處理。

這裡看更多應用範例：
https://css-tricks.com/pseudo-element-roundup/