CSS Pseudo Elements 偽元素

::before 與 ::after

::before在元素之前加入內容， ::after 在元素之後加入內容

content:””;使用

div::before{
    content:"我是 before";
    color:red;
}
div::after{
    content:"我是 after";
    color:red;
}

href 使用

a::before{
  content: attr(href);
  color:red;
}
a::after{
  content: attr(target);
  color:green;
}

content:””; + href

a::before{
  content: "( " attr(href) " ) < ";
  color:red;
}
a::after{
  content: " > ( " attr(target) " ) ";
  color:green;
}

content:””; + url

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

content:””; + quotes 括號格式

q{
  quotes: ' < ' ' > ';
}

q{
  quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ; /*3層*/

content:””; + open-quote ( 啟始括號 ) 和 close-quote ( 結束括號 )

span{
  quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
span::before{
  content:open-quote;
  color:red;
}
span::after{
  content:close-quote;
  color:#aaa;
}

::first-letter Selector

選擇每個元素字首，定義樣式。

可一起配合屬性：

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if float is ‘none’)
• text-transform
• line-height
• float
• clear

p::first-letter {
  font-size: 200%;
  color: #8A2BE2;
}

::selection Selector

定義所選擇元素(例：滑鼠選取文章)樣式。

可一起配合屬性：

• color
• background-color
• cursor
• caret-color
• outline and its longhands
• text-decoration and its associated properties
• text-emphasis-color
• text-shadow

::selection {
  color: red;
  background: yellow;
}