Ajoutez du style à vos listes ordonnées
Publié le 25 avril 2012
ParCatalin Rosu
Didier Mouronval (traducteur)
L'idée
Le HTML
Le CSS
Numérotation arrondie
Numérotation rectangulaire
Numérotation cerclée
En guise de bonus
Support des navigateurs
Conclusion et remerciements
<
ol
class
=
"
rounded-list
"
>
<
li
>
<
a
href
=
"
"
>
List item<
/
a
>
<
/
li
>
<
li
>
<
a
href
=
"
"
>
List item<
/
a
>
<
/
li
>
<
li
>
<
a
href
=
"
"
>
List item<
/
a
>
<
ol
>
<
li
>
<
a
href
=
"
"
>
List sub item<
/
a
>
<
/
li
>
<
li
>
<
a
href
=
"
"
>
List sub item<
/
a
>
<
/
li
>
<
li
>
<
a
href
=
"
"
>
List sub item<
/
a
>
<
/
li
>
<
/
ol
>
<
/
li
>
<
li
>
<
a
href
=
"
"
>
List item<
/
a
>
<
/
li
>
<
li
>
<
a
href
=
"
"
>
List item<
/
a
>
<
/
li
>
<
/
ol
>
ol{
counter-reset
:
li; /*
Initialise
le
compteur
*/
list-style
:
none
; /*
Supprime
la
numérotation
par
défaut
*/
*list-style
:
decimal
; /*
Restitue
la
numérotation
par
défaut
pour
IE6/7
*/
font
:
15px
'trebuchet MS', 'lucida sans'; padding
:
0
; margin-bottom
:
4em
; text-shadow
:
0
1px
0
rgba(255
,
255
,
255
,
.
5
); }
ol ol{
margin
:
0
0
0
2em
; /*
Ajoute
une
marge
à
gauche
pour
les
listes
imbriquées
*/
}
Numérotation arrondie
.rounded-list a{
position
:
relative
; display
:
block
; padding
:
.4em
.4em
.4em
2em
; *padding
:
.4em
; margin
:
.5em
0
; background
:
#
ddd
; color
:
#
444
; text-decoration
:
none
; border-radius:
.3em
; transition:
all .3s
ease-out; }
.rounded-list a:
hover{
background
:
#
eee
; }
.rounded-list a:
hover:
before{
transform:
rotate(360deg
); }
.rounded-list a:
before{
content
:
counter(li
); counter-increment
:
li; position
:
absolute
; left
:
-1.3em
; top
:
50%
; margin-top
:
-1.3em
; background
:
#
87ceeb
; height
:
2em
; width
:
2em
; line-height
:
2em
; border
:
.3em
solid
#
fff
; text-align
:
center
; font-weight
:
bold
; border-radius:
2em
; transition:
all .3s
ease-out; }
Numérotation rectangulaire
.rectangle-list a{
position
:
relative
; display
:
block
; padding
:
.4em
.4em
.4em
.8em
; *padding
:
.4em
; margin
:
.5em
0
.5em
2
.5em
; background
:
#
ddd
; color
:
#
444
; text-decoration
:
none
; transition:
all .3s
ease-out; }
.rectangle-list a:
hover{
background
:
#
eee
; }
.rectangle-list a:
before{
content
:
counter(li
); counter-increment
:
li; position
:
absolute
; left
:
-2.5em
; top
:
50%
; margin-top
:
-1em
; background
:
#
fa8072
; height
:
2em
; width
:
2em
; line-height
:
2em
; text-align
:
center
; font-weight
:
bold
; }
.rectangle-list a:
after{
position
:
absolute
; content
:
''; border
:
.5em
solid
transparent
; left
:
-1em
; top
:
50%
; margin-top
:
-.5em
; transition:
all .3s
ease-out; }
.rectangle-list a:
hover:
after{
left
:
-.5em
; border-left-color
:
#
fa8072
; }
Numérotation cerclée
.circle-list li{
padding
:
2
.5em
; border-bottom
:
1px
dashed
#
ccc
; }
.circle-list h2{
position
:
relative
; margin
:
0
; }
.circle-list p{
margin
:
0
; }
.circle-list h2:
before{
content
:
counter(li
); counter-increment
:
li; position
:
absolute
; z-index
:
-1; left
:
-1.3em
; top
:
-.8em
; background
:
#
f5f5f5
; height
:
1
.5em
; width
:
1
.5em
; border
:
.1em
solid
rgba(0
,
0
,
0
,
.
05
); text-align
:
center
; font
:
italic
bold
1em
/1
.5em
Georgia, Serif; color
:
#
ccc
; border-radius:
1
.5em
; transition:
all .2s
ease-out; }
.circle-list li:
hover h2:
before{
background-color
:
#
ffd797
; border-color
:
rgba(0
,
0
,
0
,
.
08
); border-width
:
.2em
; color
:
#
444
; transform:
scale(1
.
5
); }
En guise de bonus