web-dev-qa-db-fra.com

Utilisation de css :: before pour ajouter une petite icône avant les liens de liste

La question l'explique à peu près mais j'ai des éléments de liste que je veux mettre une simple icône de diamant devant eux mais quand j'essaie d'utiliser :: avant de finir de mettre l'image ci-dessus au lieu de la même ligne et je n'arrive pas vraiment à le faire découvrez comment le placer juste avant l'icône de liste sur la même ligne.

Comme je l'ai dit, l'image n'est qu'un petit diamant, son 5px par 5px

.list-menu::before {
        content: url('../images/menu-icons/image-before.png');
}
<div class="sb-slidebar sb-left sb-style-Push">
        <nav>
                <ul>
                        <li class="list-menu"><a href="#">Home</a></li>
                </ul>
        </nav>
</div>
htmlcsscss-content
10
Bob

Il n'est pas nécessaire d'utiliser le ::before pseudo-élément ici du tout. Vous pouvez simplement utiliser une image d'arrière-plan:

.list-menu {
  background-image: url('http://placehold.it/16x16');
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 20px; /* Adjust according to image size to Push text across. */
}
<div class="sb-slidebar sb-left sb-style-Push">
        <nav>
                <ul>
                        <li class="list-menu"><a href="#">Home</a></li>
                </ul>
        </nav>
</div>
18
James Donnelly

Bien, list-style-image est fait pour ça.

Pris en charge depuis IE 4.0. Cela devrait suffire, je suppose.

ul {
  list-style-image: url('http://placehold.it/12x12');
}
<ul>
  <li>Text content
  <li>Text content
  <li>Text content
</ul>
4
Creaforge