How to align a list of custom-counters? - css

Question

This HTML list (ordered but my special order),
<ul class="custom">
<li value="II">Alpha</li>
<li value="III">Beta</li>
<li value="☸" >Gamma</li>
<li value="MXX">Delta</li>
</ul>
With CSS
.custom { list-style: none; }
.custom li:before {
content: attr(value) ". ";
}
Shows the list, but I not see how to align "numbers" as in usual list.
See the point-align problem at https://jsfiddle.net/0yb7aee8/

Answer 1

In default list the number are in the ul/ols padding.
You can make st. similar like this.
.listaEspecial {
list-style: none;
list-style-position: outside;
padding-left: 0;
margin-left: 0;
}
.listaEspecial li:before {
content: attr(value) ". ";
text-align: right;
display: inline-block;
width: 45px;
padding-right: 10px;
}
Build-in list:
<ul class="listaEspecial">
<li value="II">Alpha</li>
<li value="III">Beta</li>
<li value="☸" >Gamma</li>
<li value="MXX">Delta</li>
</ul>
<hr/>
Standard list (better spacing and point-align):
<ol type="I" start="2">
<li>Alpha</li>
<li>Beta</li>
<li value="100000" >Gamma</li>
<li>Delta</li>
</ol>
The ul/ols padding is 40px, I used 55px (45px width + 10px padding for :before because of longer number.
Look that in default lists there is a problem with longer number too, 40px is too short for gamma and delta items.