Contents

CSS 偽造元素(::before)顯示序號(counter)

CSS 偽造元素(::before)顯示序號(counter)

簡單範例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
zxx-grid zxx-item::before{
  content: "0" counter(section);
  font-weight: bold;
  font-size: 3rem;
  line-height: 1;
  position: absolute;
  right: 0px;
  bottom: 0px;
}

zxx-grid zxx-item{
  position: relative;
  counter-increment: section;
}

簡單說明

重點整理:

  1. counter-reset:num; 放在父層
  2. counter-increment: num;content: counter(num) ".";放在子層,

https://jsbin.com/yebulahabu/edit?html,css,output

網路文章

CSS 偽元素 ( content 與 counter ) - OXXO.STUDIO