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

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