Masquer les points dans la numérotation d'une liste ordonnée sur IE 7

Si vous souhaitez masquer les points qui suivent les numéros dans une liste ordonnée (et pourquoi pas les remplacer par d'autres signes de ponctuations), la meilleure solution consiste à désactiver l'affichage de ces numéros, et à prendre en charge vous-même la numérotation grâce à CSS et au pseudo-élément :before :

ol { list-style-type: none; }

ol li { counter-increment: mycounter; }

ol li:before { content: counter(mycounter) ' '; }

ol.custom:first-child { counter-reset: mycounter; }

C'est bien beau, mais Internet Explorer 7 vient une nouvelle fois gâcher la fête en ne supportant pas :before.

Heureusement, en trichant un peu, il est possible de masquer "physiquement" les points en utilisant un positionnement similaire à celui-ci (qui nécessite tout de même d'insérer une balise supplémentaire, afin de pouvoir contrôler le contenu des li comme des éléments de type bloc) :

ol {

    list-style-position: inside;

    width: 72px;

}



ol li span {

    float: right; /* les noeuds de texte se comportent comme des blocs flottant à droite */

    margin-left: -7px; /* on vient superposer ces derniers avec les points */

    padding-left: 7px; /* on rétablit un peu d'espace */

    position: relative;

    z-index: 1; /* on les fait passer au-dessus des points */

    background-color: white; /* on leur donne la même couleur de fond que le conteneur */

}

Les valeurs en pixels devront évidemment être adaptées à vos propres styles ! Cette astuce est plus pratique dans le cas d'une liste de liens : les li contenant alors déjà des a, il est inutile de passer par des span superflus d'un point de vue sémantique.