今天我們要來看 CSS 中在使用偽元素的時候必須要設定的 content: '' 屬性。

content 這個屬性會用產生的值把元素給替換，而產生的值則是匿名的替換元素（anonymous replaced elements），而需要注意的是透過偽元素所產生的詞、圖形等等，是不會被螢幕讀取器讀到的，也不會被選取到，在 SEO 的表現更是不用說惹，要記得避免將重要的資訊放在 content 中去呈現。

透過 content 與 ::before 和 ::after 一起搭配的設定，我們可以靈活地做出許多種效果，其中，content 除了帶入 '' 來當作啟用這個偽元素像是宣告一樣的東西之外，還可以帶入其他不同的值。

• keywords：
  • content: none; -> 可以讓偽元素失效
  • content: normal; -> 對偽元素來說，作用與 none 相同
• image：透過 url 在元素的前後加入對應的圖片、影像、聲音等資料
  • content: url("#");
  • content: linear-gradient(color01, color02);
  • content: image-set("image1x.png" 1x, "image2x.png" 2x);
• string
  • content: "string";
• counter，可以拿來計算 DOM 元素的數量、index（MDN - counter()）也可調整數值的升降冪
  • content: counter(chapter_counter);
• attr()，可選到 HTML 的 attribute value
  • content: arrt(value string)
• quote，幾乎可以用 MDN - quotes 來取代了
  • content: open-quote;
  • content: close-quote;
  • content: no-open-quote;
  • content: no-close-quote;
    
    (source: quotes)

參考

MDN - content
Day25：小事之 CSS 偽元素 與 content Property
【day3】關於CSS content屬性