---
# System prepended metadata

title: CSS ol li 二階層樣式及前後自訂字元
tags: [Css]

---

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

## ol li 二階層樣式 *注意為counters()*
```css
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, ".") " ";
}
```
![](https://i.imgur.com/OTITTZX.png)


## li 前後加字 *注意為counter()*
```css
h3:before {
  content: "Section " counter(section) ": "; /* 显示计数器 */
}
```

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