CSS - Indent List Elements

Question

Is there a way to indent every element of a list using CSS?

So the usual list:

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

It is displayed as follows:

One
  Two
    Three
      Four

Answer 1

Here you can use a pseudo-element :beforewith a transparent border. You can indent a list item by changing the width of the pseudo-element. Along with this, you can change the list marker if you install list-style: none;and install colorincontent

EDIT:

removed display: blockand color: transparentused the space \00a0as 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>

Run codeHide result

( display: block, @dippas, border-top border - )

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

li:before {
   float: left;
   counter-increment: cnt;
   content: counter(cnt)" \25b6";
   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>

Hide result

Answer 2

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>

Hide result