Quelle serait la meilleure façon d'insérer une petite image après chaque élément de la liste ? J'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 de votre aide !
@RichardGarside Par "doctype", voulez-vous dire quelque chose comme ceci en haut ? <!DOCTYPE html>
Essayez ceci :
ul li a:after {
display: block;
content: "";
width: 3px;
height: 5px;
background: transparent url('../images/small_triangle.png') no-repeat;
}Vous avez besoin du content: ""; pour donner un contenu à l'élément généré, même si ce contenu n'est "rien".
J'ai également corrigé la syntaxe et l'ordre de vos background déclaration.
Je préfère cette technique aux autres plus simples car elle permet de contrôler la taille de l'image en utilisant background-image-size.
Vous en aurez également besoin si vous souhaitez centrer horizontalement une image. Vous ne pouvez pas la positionner à left: 50% parce qu'il ne serait pas aligné sur le milieu. Utiliser left: 0; width: 100% et fixer la position de l'arrière-plan à 50 %. Cela fonctionne bien pour moi. Merci pour l'astuce concernant l'option requise. content attribut.
C'était la meilleure réponse et aussi, si vous utilisez bootstrap, vous pouvez avoir besoin d'utiliser display : inline-block ; sinon l'image sera sous chaque élément li et pas à droite ou à gauche.
Pour le support d'IE8, la propriété "content" ne peut pas être vide.
Pour contourner ce problème, j'ai procédé comme 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%;
}Note : Cela fonctionne aussi avec les sprites d'images
Je pense que votre problème vient du fait que le pseudo-élément :after nécessite la propriété content : à l'intérieur de celui-ci. Vous devez lui demander 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');
}
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
