Inserisci immagine dopo ogni elemento dell'elenco

144

Quale sarebbe il modo migliore per inserire una piccola immagine dopo ogni elemento dell'elenco? L'ho provato con una pseudo classe ma qualcosa non va ...

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

Grazie per qualsiasi aiuto!

css

— Zac
fonte

327

Il modo più semplice per farlo è solo:

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

— jimyi
fonte

E anche alcuni problemi con questo in Firefox

— Johnny_D,

204

Essere consapevoli del fatto che IE7 fa schifo.

— Big McLarge: enorme

@RichardGarside Per "doctype", intendi qualcosa di simile in alto? <!DOCTYPE html>

— Joe Morano,

Il problema con questo metodo è che non è possibile fornire un testo alternativo per l'immagine, che (a seconda dell'uso dell'immagine) può ridurre l'accessibilità.

— Damien,

2

Ma non puoi dare altezza / larghezza all'immagine usando questo.

— Faisal Ashfaq,

82

Prova questo:

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

Hai bisogno di content: ""; dichiarazione per fornire il contenuto dell'elemento generato, anche se tale contenuto è "nulla".

Inoltre, ho corretto la sintassi / l'ordinamento della tua backgrounddichiarazione.

— Tyson
fonte

13

Mi piace questa tecnica rispetto a quelle più semplici perché ti dà il controllo sulla dimensione dell'immagine usando la dimensione dell'immagine di sfondo.

— Andrew Hedges,

2

Ne avresti bisogno anche se vuoi centrare orizzontalmente un'immagine. Non puoi posizionarlo left: 50%perché non sarebbe allineato al centro. Utilizzare left: 0; width: 100%e impostare invece la posizione di sfondo al 50%. Funziona bene per me. Grazie per il suggerimento sull'attributo richiesto content.

— ygoe

1

Questa è stata la risposta migliore e, inoltre, se si utilizza bootstrap, potrebbe essere necessario utilizzare display: inline-block; altrimenti l'immagine sarà sotto ogni elemento li e non a destra o a sinistra

— Marvel Moe,

1

Sembra fantastico ma per visualizzare l'immagine in linea (dopo "li"), dovrebbe essere "display: inline-block".

— Deadpool

e anchebackground-size: container

— Roger

11

Per il supporto IE8, la proprietà "content" non può essere vuota.

Per aggirare questo ho fatto quanto segue:

.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: funziona anche con gli sprite di immagini

— jonnocraig
fonte

4

Penso che il tuo problema sia che l'elemento psedo: after richiede il contenuto: proprietà impostata al suo interno. Devi dirlo per inserire qualcosa. Potresti anche semplicemente inserire l'immagine direttamente:

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

— Gabriel Hurley
fonte

1

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

— Chưa biết
fonte

0

La mia soluzione per fare questo:

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

— opaco
fonte