Masquer les points dans la numérotation d'une liste ordonnée sur IE 7
: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.