CSS - Indent list items

Question

Is there a way to indent each list-item using CSS?

So a normal list:

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

Displays like so:

One
  Two
    Three
      Four

Bleachers

nth-child selector with progressive values should help but that sounds like too bulky an approach. Sass/Less loops will help minimize the code that needs to be written but the end CSS (compiled) will still be bulky. – Gabbro

Answer 1

Here you can use :before pseudo-element with transparent border. You can variate indent of list item by changing a width of pseudo-element. Along with that you can change list marker if set list-style: none; and set color of content

EDIT:

removed display: block and color: transparent and used space character \00a0 as a content.

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

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

The following one is little more complex with changed list marker (removed display: block as advised by @dippas, but border-top instead border didn't work for some reason)

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;
}

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

Tinea

Damn thats clever – Bleachers

this is nice trick, but can be improved, only needs border-top and no need display:block – Regardless

@Regardless I've append one more variant according to your notes – Tinea

@Tinea it worked in FF, don't know which browser are you using – Regardless

Answer 2

If you have a lot of list-items,then the answer given by @Banzay is cleaner, but if you just have few of them, you can use nth-child for that

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>

Regardless