CSS-отступ элементов списка

есть ли способ отступить каждый элемент списка с помощью CSS?

Итак, обычный список:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

отображается вот так:

One
  Two
    Three
      Four
7
css html html-lists

2 ответов

здесь вы можете использовать :before псевдо-элемент с прозрачной границей. Отступ элемента списка можно изменить, изменив ширину псевдо-элемента. Наряду с этим вы можете изменить маркер списка, если set list-style: none; и set color of content

EDIT:

удалены display: block и color: transparent и используется пробел a0 как содержание.

li:before {
    float: left;
    content: "a0";
    width: 20px;
    border: 1px solid transparent;
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

следующий немного сложнее с измененным маркером списка (удалено display: block как посоветовал @dippas, но border почему-то не получилось)

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

li:before {
   float: left;
   counter-increment: cnt;
   content: counter(cnt)" b6";
   max-height: 100%;
   width: 25px;
   border: 1px solid transparent;
   margin-top: -.2em;
   color: green;
}
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
    </ul>
9

если у вас много list-items,потом ответ данный @Banzay чище, но если у вас их всего несколько, вы можете использовать nth-child для этого

li:first-child {
  margin-left: 10px
}
li:nth-child(2) {
  margin-left: 20px
}
li:nth-child(3) {
  margin-left: 30px
}
li:nth-child(4) {
  margin-left: 40px
}
/*just demo*/

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>
4