Les listes

Les propriétés list-style permettent de customiser la puce de votre liste. Vous pourrez changer le rond par un élément graphique de votre choix, et le placer comme bon vous semble.

list-style-type

La propriété list-style-type permet de définir l'élément graphique : un disque, un cercle, un carré, un emoji … 

						
							<ul>
								<li class="disc">
									Exemple d'item de liste avec un disque.
								</li><!-- .disc -->
								<li class="circle">
									Exemple d'item de liste avec un cercle.
								</li><!-- .circle -->
								<li class="square">
									Exemple d'item de liste avec un carré.
								</li><!-- .square -->
								<li class="emoji">
									Exemple d'item de liste avec un emoji.
								</li><!-- .emoji -->
							</ul>
						
					
						
							li.disc{
								list-style-type: disc;
							}
							li.circle{
								list-style-type: circle;
							}
							li.square{
								list-style-type: square;
							}
							li.emoji{
								list-style-type: "\1F44D";
							}

Résultat :

Vous pouvez retrouver la liste complète des emojis ici.

list-style-position

La propriété list-style-position permet de définir si la puce se trouve dans notre balise <li>, ou bien à l'extérieur : 

						
							<ul>
								<li class="inside">
									Exemple d'item de liste dans ma balise.
								</li><!-- .inside -->
								<li class="inside">
									Exemple d'item de liste dans ma balise.
								</li><!-- .inside -->
								<li class="inside">
									Exemple d'item de liste dans ma balise.
								</li><!-- .inside -->
							</ul>
						
					
						
							li.inside{
								list-style-position: inside;
							}

Résultat :

Essayons maintenant de mettre nos puces à l'extérieur de la balise : 

						
							<ul>
								<li class="outside">
									Exemple d'item de liste dans ma balise.
								</li><!-- .outside -->
								<li class="outside">
									Exemple d'item de liste dans ma balise.
								</li><!-- .outside -->
								<li class="outside">
									Exemple d'item de liste dans ma balise.
								</li><!-- .outside -->
							</ul>
						
					
						
							li.outside{
								list-style-position: outside;
							}

Résultat :

list-style-image

La propriété list-style-image nors permet d'utiliser n'importe quelle image comme puce. Vous pouvez utiliser les formats suivants : 

						
							<ul>
								<li class="banana">
									Exemple d'item de liste avec une banane comme puce.
								</li><!-- .banana -->
								<li class="banana">
									Exemple d'item de liste avec une banane comme puce.
								</li><!-- .banana -->
								<li class="banana">
									Exemple d'item de liste avec une banane comme puce.
								</li><!-- .banana -->
							</ul>
						
					
						
							li.banana{
								list-style-image: url("images/banana.svg");
							}

Résultat :