Comment utiliser une image-objet à droite d'un texte avec une largeur inconnue?

Question

Étant donné l'exemple suivant: http://cl.ly/2UAa

Comment puis-je utiliser un sprite sur le côté droit de la ligne « voir plus ... » pour qu'il ajuste toujours avec la largeur du texte? Dois-je créer un élément séparé qui flottera avec le texte, ou existe-t-il un moyen de le faire directement dans le lien.

Answer 1

Vous pouvez l'appliquer à l'arrière-plan du lien, l'aligner à droite et lui donner un bourrage à droite.

a { 
    background: url(image_url) no-repeat right center; 
    padding-right: 80px; // 80 pixels example 
} 

Answer 2

Ma méthode préférée consiste à utiliser un pseudo-élément et à définir l'image comme contenu;

a:after { 
    content: url(path/to/image.png); 
} 

Vous pouvez également créer un pseudo élément avant un élément ou utiliser du texte au lieu d'une image comme contenu;

a:before { 
    content:' \25BA'; 
} 

\ 25BA est le CSS escape character un droit flèche pointant vers, mais vous pouvez mettre tout texte entre guillemets.

Bien sûr, vous pouvez également utiliser la méthode background comme jeroen suggéré, et les deux méthodes sont utiles pour différentes situations.