Add spacing between the <li> text and the before content - css

Question

I want to achieve something like this:
000 Lorem ipsum
dolor
0 Lorem ipsum
dolor
This is the code I'm working with:
<ul>
<li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
<li>Lorem ipsum dolor sit amet elit</li>
</ul>
CSS:
li:before {
content: "0";
}
li:first-child:before {
content: "000";
}
ul {
width:100px;
list-style: none;
}
Can you help me with CSS to have the text stay equally away from the before content?
"Lorem" and "dolor" need to stay in the same "vertical line".
https://jsfiddle.net/ga6r8qsz/
Thank you.

Answer 1

You can do this using absolute positioning on the before elements. This will ensure that your li items will remain vertically in line.
li {
position: relative;
padding-left: 15px;
margin-bottom: 15px;
}
li::before {
content: "0";
position: absolute;
width: 35px;
left: -35px;
}
li:first-child::before {
content: "0000";
}
ul {
width: 100px;
list-style: none;
}
<ul>
<li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
<li>Lorem ipsum dolor sit amet elit</li>
</ul>

Answer 2

make the pseudoelements ::befores like blocks, in that way you can add the width of them and control the view of the list in that way
here example:
li:before {
content: "0";
display:inline-block;
width:35px;
}
li:first-child:before {
content: "000";
display:inline-block;
width:35px;
}
ul {
width:300px;
list-style: none;
}
<ul>
<li>some text</li>
<li>some text more</li>
</ul>

Answer 3

Using the display: flex property on li elements will not only give equal spacing between the :before pseudo elements and the li tags, but will also make the li tags left aligned on new lines as shown below.
li {
display: flex;
}
li:before {
content: "0";
width:70px;
}
li:first-child:before {
content: "000";
}
ul {
width:150px;
list-style: none;
}
<ul>
<li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
<li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
</ul>

Answer 4

Here is an idea where you don't need to use any fixed value for width. Consider a table layout and it will work with any pseudo element content:
li:before {
content: "0";
display:table-cell;
padding-right:5px;
}
li:first-child:before {
content: "000";
}
ul {
width:200px;
list-style: none;
display:table;
}
li {
display:table-row;
}
<ul>
<li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
<li>Lorem ipsum dolor sit amet elit</li>
</ul>