CSS pseudo-element

1月 12 2022 CSS

博大精深。

::before ::after

備註：這邊只介紹這兩個，其他可以參考：偽元素一覽表

為了跟 Pseudo-class 做區別，會用「::」來表示。

它的作用就很像是幫你產生一個虛擬的 <span>，然後可以設定內容跟樣式是什麼：

1
2
3

<div>100</div>
<div>100</div>
<div>100</div>

/* $100 */
div::before{
  content: '$';
}

但注意一定要設定 content，不然不會產生虛擬元素。如果沒有內容能設定成「空字串」。

另外 content 還有一個特別的值：attr()，可以把標籤的屬性值當作內容：

1
2
3

<div data-symbol="NTD">100</div>
<div data-symbol="USD">100</div>
<div data-symbol="TWD">100</div>

/*
  記得 attr 內不要加引號
  100NTD
  100USD
  100TWD
*/
div::before {
  content: attr(data-symbol);
}

這樣的好處是可以讓 HTML 乾淨很多，不然你原本得這樣寫：

1
2
3

<div>100<span>NTD</span></div>
<div>100<span>USD</span></div>
<div>100<span>TWD</span></div>