Question

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

当我们编写<ol><li></li></ol>标记时，默认情况下生成的小数位如下：

ABC

DEF

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,".") " - ";
}

Answer 2

您可以使用counter-increment属性来实现此目的。在下面的示例中，我首先将li元素的样式重置为none，您实际上可以在ol本身重置它。

稍后，我设置counter-increment并使用content属性来输入值和-。

ol li {
  list-style-type: none;
  counter-increment: step-counter;
}

ol li:before {
  content: counter(step-counter) " - ";
}

Demo

我建议您在MDN上阅读counter-increment以上的内容。

注意：step-counter是一个组成单词，您可以使用任何您想要的东西在那个地方，您可以使用custom-counter，dash-counter或你喜欢什么。

Answer 3

试试这个css代码

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

li:before { 
  content: counter(item) " -  "; 
  counter-increment: item 
}

Fiddle Here

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

3 个答案: