CSS - space between the bullet and the list without padding the list

Question

I'm spending hours hunting a solution on internet. It seems there is no answer to my question.

I use simple liste like this:

<ul class="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

my list-style-type is lower-alpha . Until there it's quite basic.

Problem: The list-style-type is not aligned to my grid.

Question: How can I offset the list-style-type in order to create a space of 20px to the left without touching the <li>'s padding? All the solutions I've found on the internet says to add padding to the <li> and create a compensation if needed to stick the grid.

I want to achieve this :

to

Answer 1

Have you considered using a pseudo element?

This process can offer complete control over the bullets position and shape.

li {
  list-style: none;
  position: relative;
}

li::before {
  content: '•';
  position: absolute;
  left: -30px;
}

<ul class="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

Bullets with incremental characters

li {
  list-style: none;
  position: relative;
  counter-increment: Count;
}

li::before {
  content: counter(Count, lower-alpha) ".";
  position: absolute;
  left: -30px;
}

<ul class="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

Bullets with incremental integers

li {
  list-style: none;
  position: relative;
  counter-increment: Count 1;
}

li::before {
  content: counter(Count) ")";
  position: absolute;
  left: -30px;
}

<ul class="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>