Inserir imagem após cada item da lista

144

Qual seria a melhor maneira de inserir uma imagem pequena após cada elemento da lista? Eu tentei com uma pseudo classe, mas algo não está certo ...

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

Obrigado por qualquer ajuda!

css Zac
fonte

Respostas:

327

A maneira mais fácil de fazer isso é apenas:

ul li:after {
    content: url('../images/small_triangle.png');
}
jimyi
fonte
E também alguns problemas com isso no firefox
Johnny_D 28/09
204
Esteja ciente de que o IE7 é péssimo.
Big McLargeHuge
@ RichardGarside Por "doctype", você quer dizer algo assim no topo? <!DOCTYPE html>
91315 Joe Morano
O problema com esse método é que você não pode fornecer um texto alternativo para a imagem, que (dependendo do uso da imagem) pode reduzir a acessibilidade.
Damien
2
Mas você não pode atribuir altura / largura à imagem usando isso.
Faisal Ashfaq
82

Tente o seguinte:

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

Você precisa da content: "";declaração para fornecer conteúdo ao elemento gerado, mesmo que esse conteúdo seja "nada".

Corrigi também a sintaxe / ordem da sua backgrounddeclaração.

Tyson
fonte
13
Eu gosto dessa técnica sobre as mais simples, porque fornece controle sobre o tamanho da imagem usando o tamanho da imagem de fundo.
Andrew Hedges
2
Você também precisaria disso se quiser centralizar horizontalmente uma imagem. Você não pode posicioná-lo left: 50%porque não estaria alinhado ao meio. Use left: 0; width: 100%e defina a posição do plano de fundo para 50%. Funciona bem para mim. Obrigado pela dica sobre o contentatributo necessário .
ygoe 25/05
1
Esta foi a melhor resposta e, também, se você estiver usando o bootstrap, poderá ser necessário usar display: bloco em linha; caso contrário, a imagem estará sob cada item li e não à direita ou à esquerda
Marvel Moe
1
Parece ótimo, mas para exibir a imagem em linha (após o "li"), ela deve ser "display: inline-block".
Deadpool
e tambémbackground-size: container
roger
11

Para suporte ao IE8, a propriedade "content" não pode estar vazia.

Para contornar isso, fiz o seguinte:

.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: Isso também funciona com sprites de imagem

jonnocraig
fonte
4

Eu acho que o seu problema é que o elemento psuedo: after requer o conteúdo: propriedade definida dentro dele. Você precisa dizer para inserir algo. Você pode até inserir a imagem diretamente:

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

Minha solução para fazer isso:

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