Add extra space on li-style-element - html

Question

HTML:
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
</ul>
CSS:
li::before {
content: "– " " ";
}
li {
list-style: outside none none;
padding: 0 0 0 10px;
text-indent: -10px;
}
I would like to add an extra space after the - of each li. I tried:
content: "- "
but it doesnt work. How can I add this.
thanks
thomas

Answer 1

You can moderate the space by adding padding-right to it.
Like this
li::before {
content: "+";
padding-right: 10px;
}
li {
list-style: outside none none;
padding: 0 0 0 10px;
text-indent: -10px;
}
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
</ul>

Answer 2

you could use \00a0 (unicode) in css content
content: "–\00a0\00a0\";
try: https://jsfiddle.net/Lh6ro16g/

Answer 3

Place :before with position: absolute and increase / decrease padding-left on <li> to set indent as much as you want. This method will allow you to have text aligned vertically even if it goes in multiple lines.
li::before {
position: absolute;
content: "–";
top: 1px;
left: 0;
}
li {
list-style: outside none none;
padding-left: 20px;
position: relative;
}
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
<li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</li>
</ul>

Answer 4

you can increase / decrease space using padding-right on li as much as you want.
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
enter</ul>
li:before {
content: "-";
padding-right: 20px;
}
li{
list-style:outside none;
}