CSS - 缩进列表项

有没有办法使用CSS缩进每个列表项？

所以正常的清单:

  
One
  
Two
  
Three
  
Four

显示如下:

One
  Two
    Three
      Four

Banzay.. 9

在这里,您可以使用:before带有透明边框的伪元素.您可以通过更改伪元素的宽度来变量列表项的缩进.随着如果设置可以更改列表标记list-style: none;和设置color的content

编辑:

删除display: block并color: transparent使用空格字符\00a0作为内容.

li:before {
    float: left;
    content: "\00a0";
    width: 20px;
    border: 1px solid transparent;
}

  
One
  
Two
  
Three
  
Four

ul {
   list-style: none;
   counter-reset: cnt;
}

li:before {
   float: left;
   counter-increment: cnt;
   content: counter(cnt)" \25b6";
   max-height: 100%;
   width: 29px;
   border: 1px solid transparent;
   margin-top: -.1em;
   color: green;
}

      
One
      
Two
      
Three
      
Four
    

li:before {
    float: left;
    content: "\00a0";
    width: 20px;
    border: 1px solid transparent;
}

  
One
  
Two
  
Three
  
Four