---
tags: Css
---
# CSS ol li 二階層樣式及前後自訂字元

## ol li 二階層樣式 *注意為counters()*

ol {
  list-style-type: none;
  counter-reset: item;
}

ol > li {
  counter-increment: item;
}

ol > li:before {
  content: counters(item, ".") ". "; 
}

li ol > li:before {
  content: counters(item, ".") " ";
}


## li 前後加字 *注意為counter()*

h3:before {
  content: "Section " counter(section) ": "; /* 显示计数器 */
}

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters