Insérer une image après chaque élément de la liste

144

Quelle serait la meilleure façon d'insérer une petite image après chaque élément de liste? Je l'ai essayé avec une pseudo classe mais quelque chose ne va pas ...

ul li a:after {display: block;
width: 3px;
height: 5px;
background: url ('../images/small_triangle.png') transparent no-repeat;}

Merci pour toute aide!

css

— Zac
source

327

Le moyen le plus simple de le faire est simplement:

ul li:after {
    content: url('../images/small_triangle.png');
}

— Jimyi
source

Et aussi quelques problèmes avec cela dans Firefox

— Johnny_D

204

Sachez que IE7 est nul.

— Big McLargeHuge

@RichardGarside Par "doctype", voulez-vous dire quelque chose comme ça en haut? <!DOCTYPE html>

— Joe Morano

Le problème avec cette méthode est que vous ne pouvez pas fournir un autre texte pour l'image, ce qui (en fonction de l'utilisation de l'image) peut réduire l'accessibilité.

— Damien

2

Mais vous ne pouvez pas donner de hauteur / largeur à l'image en utilisant ceci.

— Faisal Ashfaq

82

Essaye ça:

ul li a:after {
    display: block;
    content: "";
    width: 3px;
    height: 5px;
    background: transparent url('../images/small_triangle.png') no-repeat;
}

Vous avez besoin de la content: "";déclaration pour donner le contenu de votre élément généré, même si ce contenu n'est "rien".

De plus, j'ai corrigé la syntaxe / l'ordre de votre backgrounddéclaration.

— Tyson
source

13

J'aime cette technique par rapport aux plus simples car elle vous permet de contrôler la taille de l'image en utilisant background-image-size.

— Andrew Hedges

2

Vous en aurez également besoin si vous souhaitez centrer horizontalement une image. Vous ne pouvez pas le positionner left: 50%car il ne serait pas aligné au milieu. Utilisez left: 0; width: 100%et réglez la position de l'arrière-plan sur 50% à la place. Fonctionne bien pour moi. Merci pour le conseil sur l' contentattribut requis .

— ygoe

1

C'était la meilleure réponse et aussi, si vous utilisez bootstrap, vous devrez peut-être utiliser display: inline-block; Sinon, l'image sera sous chaque élément li et non à droite ou à gauche

— Marvel Moe

1

Ça a l'air génial mais pour afficher l'image en ligne (après le "li"), il devrait être "display: inline-block".

— Deadpool

et aussibackground-size: container

— roger

11

Pour la prise en charge d'IE8, la propriété "content" ne peut pas être vide.

Pour contourner cela, j'ai fait ce qui suit:

.ul li:after {
    content:"icon";
    text-indent:-999em;
    display:block;
    width:32px;
    height:32px;
    background:url(../img/icons/spritesheet.png) 0 -620px no-repeat;
    margin:5% 0 0 45%;
}

Remarque: cela fonctionne également avec les sprites d'image

— jonnocraig
source

4

Je pense que votre problème est que l'élément: after psuedo-element nécessite le contenu: propriété définie à l'intérieur. Vous devez lui dire d'insérer quelque chose. Vous pouvez même lui demander d'insérer l'image directement:

ul li:after {
    content: url('../images/small_triangle.png');
}

— Gabriel Hurley
source

1

ul li + li:before
{
    content:url(imgs/separator.gif);
}

— Chưa biết
source

0

Ma solution pour faire ça:

li span.show::after{
  content: url("/sites/default/files/new5.gif");
  padding-left: 5px;
}

— Mat
source