css - para - Insertar imagen después de cada elemento de la lista

insertar imagen html url

Question

¿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!

Answer 1

Creo que su problema es que: después de 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'');
}

Answer 2

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

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

Answer 3

Mi solución para hacer esto:

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

Answer 4

Para la compatibilidad con IE8, la propiedad "content" 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

Answer 5

Prueba esto:

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

Necesitas el 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 declaración de background .

Answer 6

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