How to align a list of custom-counters?

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.