Insertar imagen después de cada elemento de la lista

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

 125
css
Author: Zac, 2009-06-03
Source

6 answers

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

ul li:after {
    content: url('../images/small_triangle.png');
}
 296
Author: jimyi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-06-03 18:46:40

Prueba esto: 

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

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

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

 69
Author: Tyson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-06-03 18:43:21

Para soporte 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 imágenes

 11
Author: jonnocraig,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-06 16:55:38

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

ul li:after {
    content: url('../images/small_triangle.png');
}
 4
Author: Gabriel Hurley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-06-03 18:48:01 
ul li + li:before
{
    content:url(imgs/separator.gif);
}
 1
Author: Chưa biết,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-26 03:17:30

Mi solución para hacer esto: 

li span.show::after{
  content: url("/sites/default/files/new5.gif");
  padding-left: 5px;
}
 0
Author: Matt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-12 02:12:06