html - 如何更改CSS中标签的样式

Question

我的问题很小很简单，希望您能理解。

当我们写<ol><li></li></ol>标签，它默认生成的小数是这样的:

1. abc
2. def
3. geh

etc....

但我想改变 <ol><li></li></ol> 的样式像这样(非常小的变化，因为我的设计师给我这个):

1 - abc
2 - def
3 - gih

etc....

所以请告诉我如何在 ol 中实现这个设计.

这是我的 CSS 代码:

ol {
  margin: 0;
  padding: 0;
}
ol li {
    list-style: decimal;
}

Answer 1

您可以尝试使用 CSS counter。请参阅此链接:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

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

li::before {
  counter-increment: section;            
  content: counters(section,".") " - ";
}