虛擬元素一定要具備的 content 屬性

一、虛擬元素 (Pseudo Element) 一定要具備 content 屬性

沒有 content 屬性是不會在畫面上顯示任何東西的，就算是只有 content:""; 都可以。

HTML:
<a href="https://dtgunexpectedly.blogspot.tw/" target="_blank">呆頭豬的雲</a>

CSS:
a::before{
  content: attr(href); /* 將超連結的 href 內容顯示在前面 */
}
a::after{
  content: attr(target); /* 將超連結的 target 內容顯示在後面 */
}

結果:
https://dtgunexpectedly.blogspot.tw/呆頭豬的雲_blank

二、content 內容用一個空白鍵就可以不斷「相連累加」

HTML:
<a href="https://dtgunexpectedly.blogspot.tw/" target="_blank">呆頭豬的雲</a>

CSS:
a::before{
  content: "( " attr(href) " ) " " ( " attr(target) " ) ";
}

結果:
( https://dtgunexpectedly.blogspot.tw/ )  ( _blank ) 呆頭豬的雲

三、content 可以使用 url 放入圖片

CSS:
div::before{
  content:url(圖片網址) url(圖片網址);
}

四、content 搭配 quotes 使用

quotes 為定義「括號格式」的屬性。

HTML:

最外層<q>第一層<q>第二層</q><q>第二層<q>第三層</q></q></q>。

CSS:

q{

  quotes: ' < ' ' > ';

}

結果:

最外層<第一層<第二層><第二層<第三層>>>。

HTML:

最外層<q>第一層<q>第二層</q><q>第二層<q>第三層</q></q></q>。

CSS:

q{

  quotes: ' < ' ' > ' ' [ ' ' ] ' ' ( ' ' ) ' ;

}

結果:

最外層<第一層[第二層][第二層(第三層)]>。

HTML:

最外層<q>第一層<q>第二層</q><q>第二層<q>第三層</q></q></q>。

CSS:

span{

  quotes: ' < ' ' > ' ' [ ' ' ] ' ' ( ' ' ) ' ;

}

span::before{

  content:open-quote; /* 啟始括號 */

  color:red;

}

span::after{

  content:close-quote; /* 結束括號 */

  color:#aaa;

}

結果:

最外層<第一層[第二層][第二層(第三層)]>。