Quale sarebbe il modo migliore per inserire una piccola immagine dopo ogni elemento della lista? Ho provato con una pseudo classe, ma qualcosa non è giusto ...Inserisci immagine dopo ogni elemento della lista
ul li a:after {display: block;
width: 3px;
height: 5px;
background: url ('../images/small_triangle.png') transparent no-repeat;}
Grazie per qualsiasi aiuto!
Il modo più semplice per farlo è solo:
ul li:after {
content: url('../images/small_triangle.png');
}
Prova questa:
ul li a:after {
display: block;
content: "";
width: 3px;
height: 5px;
background: transparent url('../images/small_triangle.png') no-repeat;
}
È necessario la dichiarazione content: ""; di dare il vostro contenuto di un elemento generato, anche se che il contenuto è "niente".
Inoltre, ho corretto la sintassi/l'ordine della vostra dichiarazione background.
I come questa tecnica rispetto a quelle più semplici perché ti dà il controllo sulla dimensione dell'immagine usando la dimensione dell'immagine di sfondo. –
Avresti anche bisogno di questo se vuoi centrare orizzontalmente un'immagine. Non puoi posizionarlo a sinistra: 50% perché non sarebbe allineato al centro. Usa 'sinistra: 0; width: 100% 'e imposta invece la posizione dello sfondo al 50%. Funziona bene per me. Grazie per il suggerimento sull'attributo 'contenuto' richiesto. – ygoe
Questa è stata la risposta migliore e inoltre, se si sta utilizzando il bootstrap, potrebbe essere necessario utilizzare display: inline-block; altrimenti l'immagine sarà sotto ogni voce li e non a destra o a sinistra –
Credo che il problema è che la: dopo la pseudo-elemento richiede il contenuto: proprietà ubicata all'interno di esso. Devi dirlo per inserire qualcosa. Si potrebbe anche solo averlo inserire l'immagine direttamente:
ul li:after {
content: url('../images/small_triangle.png');
}
Per il supporto IE8, la proprietà "contenuto" non può essere vuoto.
Per ovviare a questo ho fatto la seguente:
.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%;
}
Nota: Questo funziona con sprite immagine troppo
ul li + li:before
{
content:url(imgs/separator.gif);
}
La mia soluzione per fare questo:
li span.show::after{
content: url("/sites/default/files/new5.gif");
padding-left: 5px;
}
Grazie per quello :)! – Zac
Ricorda che la proprietà content non funziona in IE7. – mrec
Neanche IE 8 per me –