CSS偽元素

注意事項

空元素 (img, br等,沒有一對的元素),不能使用偽元素

目的

用CSS在HTML內容的前面或後面增添文字(可以批量增添)
偽元素下,文字要用【””】框住
一定要寫一行content

範例

div(data-size="small") 400
div(data-size="medium") 800 
div(data-size="large") 1200
div
  border: solid 2px black
  width: 150px
  height: 100px
  padding: 20px
  margin: 20px
  &::before
    content: attr(data-size) "-"
  &::after
    content: "$"

Display

small-400$
medium-800$
large-1200$

 

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *