Insertar imagen después de cada elemento de la lista

144

¿Cuál sería la mejor manera de insertar una imagen pequeña después de cada elemento de la lista? Lo intenté con una pseudo clase pero algo no está bien ...

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

¡Gracias por cualquier ayuda!

css

— Zac
fuente

327

La forma más fácil de hacerlo es simplemente:

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

— jimyi
fuente

Y también algunos problemas con esto en firefox

— Johnny_D

204204

Tenga en cuenta que IE7 apesta.

— Big McLargeHuge

@RichardGarside Por "doctype", ¿te refieres a algo como esto en la parte superior? <!DOCTYPE html>

— Joe Morano

El problema con este método es que no puede proporcionar un texto alternativo para la imagen, que (dependiendo de para qué se use la imagen) puede reducir la accesibilidad.

— Damien

2

Pero no puede dar alto / ancho a la imagen usando esto.

— Faisal Ashfaq

82

Prueba esto:

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

Necesita la content: "";declaración para dar el contenido de su elemento generado, incluso si ese contenido es "nada".

Además, arreglé la sintaxis / orden de su backgrounddeclaración.

— Tyson
fuente

13

Me gusta esta técnica sobre las más simples porque te da control sobre el tamaño de la imagen usando background-image-size.

— Andrew Hedges

2

También necesitaría esto si desea centrar horizontalmente una imagen. No puede posicionarlo left: 50%porque no estaría alineado en el medio. Utilice left: 0; width: 100%y establezca la posición de fondo al 50% en su lugar. Funciona bien para mi Gracias por el consejo sobre el contentatributo requerido .

— 2013

1

Esta fue la mejor respuesta y también, si está usando bootstrap, es posible que necesite usar display: inline-block; de lo contrario, la imagen estará debajo de cada elemento li y no a la derecha o izquierda

— Marvel Moe

1

Se ve muy bien, pero para mostrar la imagen en línea (después de "li"), debería ser "display: inline-block".

— Deadpool

y tambiénbackground-size: container

— roger

11

Para el soporte de IE8, la propiedad "contenido" no puede estar vacía.

Para evitar esto, he hecho lo siguiente:

.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: Esto también funciona con sprites de imagen

— jonnocraig
fuente

4

Creo que su problema es que: after psuedo-element requiere el contenido: propiedad establecida dentro de él. Necesitas decirle que inserte algo. Incluso podría hacer que inserte la imagen directamente:

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

— Gabriel Hurley
fuente

1

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

— Chưa biết
fuente

0

Mi solución para hacer esto:

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

— Mate
fuente