如何在CSS中更改<ol>标签的样式

Question

我的问题很简单,所以希望你能理解它.

当我们写<ol><li></li></ol>tag时,默认情况下生成的小数如下:

1. ABC
2. 高清
3. GEH

等等....

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

1 - abc
2 - def
3 - gih

等等....

那么请告诉我如何才能实现这个设计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,".") " - ";
}