ol-Listennummerierung formatieren

[Gunnar Bittersmann]

@@finkenmann:

nuqneH

Ich möchte gerne bei einer nummerierten Liste (ol) die Nummerierung separat formatieren und würde gerne den Punkt hinter der Zahl eliminieren. Die Zahl soll also ohne Punkt ausgegeben werden und sollte fett und rot werden. Der li-Eintrag aber normal und schwarz.

Dann warte mal ab, bis ::marker [CSS3-LISTS §9] in den Browsern implementiert ist.

In der Zwischenzeit kannst du mit JavaScript nachhelfen und für jedes Listitem  ein 'span'-Element mit der Numerierung erzeugen:

var myList = document.getElementById("myList");  
for (var i = 0, counter = 1; i < myList.childNodes.length; i++)  
  if (myList.childNodes[i].nodeType == 1)  
    myList.childNodes[i].innerHTML = '<span class="marker">' + counter++ + '</span>' + myList.childNodes[i].innerHTML;

Bei aktiviertem JavaScript (Klasse "js" setzen: [PERFORMANCE-BP2]) blendest du die Standard-Listennumerierung aus und setzt die 'span'-Elemente an die Stelle:

.js #myList  
{  
  list-style: none;  
}  
  
.js #myList li  
{  
  position: relative;  
}  
  
.marker  
{  
  color: red;  
  font-weight: bold;  
  left: -3ex;  
  position: absolute;  
  text-align: right;  
  width: 2ex;  
}

Qapla'