1

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/

Peter Krauss
  • 13,174
  • 24
  • 167
  • 304

1 Answers1

4

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.

pavel
  • 26,538
  • 10
  • 45
  • 61
  • Thanks, is perfect (!). Well, `45px`,etc. hum... You show also that HTML5+CSS2 have no elegant solution... There are some "CSS news" (perhaps CSS3) to solve the "decimal align classic problem"? See ugly (complex) solution at https://stackoverflow.com/a/1363337/287948 – Peter Krauss Dec 12 '17 at 20:20
  • @PeterKrauss: putting there left/right classes and align by them is more ugly than this one. In default list styles with high numbers/counters you need to increase the list left padding like `ul {padding-left: 60px}` as I did in my example, it will works too. But by default there is nothing clever which test the counter length and set padding for list. – pavel Dec 12 '17 at 20:24