Wstaw obraz po każdym elemencie listy

143

Jaki byłby najlepszy sposób wstawienia małego obrazu po każdym elemencie listy? Próbowałem z pseudoklasą, ale coś jest nie tak ...

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

Dzięki za pomoc!

css

— Zac
źródło

326

Najłatwiejszym sposobem jest po prostu:

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

— jimyi
źródło

A także kilka problemów z tym w przeglądarce Firefox

— Johnny_D

204

Pamiętaj, że IE7 jest do bani.

— Big McLargeHuge

@RichardGarside Przez „doctype” masz na myśli coś takiego u góry? <!DOCTYPE html>

— Joe Morano,

Problem z tą metodą polega na tym, że nie możesz podać alternatywnego tekstu dla obrazu, co (w zależności od tego, do czego służy obraz) może zmniejszyć dostępność.

— Damien

2

Ale nie możesz podać wysokości / szerokości obrazu używając tego.

— Faisal Ashfaq

82

Spróbuj tego:

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

content: "";Deklaracja jest potrzebna, aby nadać wygenerowanemu elementowi zawartość, nawet jeśli ta zawartość to „nic”.

Poprawiłem również składnię / kolejność backgrounddeklaracji.

— Tyson
źródło

13

Podoba mi się ta technika nad prostszymi, ponieważ daje ci kontrolę nad rozmiarem obrazu przy użyciu rozmiaru tła-obrazu.

— Andrew Hedges,

2

Byłoby to również potrzebne, jeśli chcesz wyśrodkować obraz w poziomie. Nie możesz go ustawić, left: 50%ponieważ nie byłby wyrównany do środka. left: 0; width: 100%Zamiast tego użyj i ustaw pozycję tła na 50%. U mnie działa dobrze. Dziękujemy za wskazówkę dotyczącą wymaganego contentatrybutu.

— ygoe

1

To była lepsza odpowiedź, a także, jeśli używasz bootstrap, może być konieczne użycie display: inline-block; w przeciwnym razie obraz będzie pod każdym elementem li, a nie po prawej lub lewej stronie

— Marvel Moe

1

Wygląda świetnie, ale aby wyświetlić obraz w tekście (po "li"), powinno być "display: inline-block".

— Deadpool,

a takżebackground-size: container

— roger

11

W przypadku obsługi przeglądarki IE8 właściwość „content” nie może być pusta.

Aby obejść ten problem, wykonałem następujące czynności:

.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%;
}

Uwaga: działa to również z obrazkami

— jonnocraig
źródło

4

Myślę, że twój problem polega na tym, że element: after psuedo-element wymaga ustawionej w nim właściwości content: property. Musisz mu powiedzieć, żeby coś wstawił. Możesz nawet po prostu wstawić obraz bezpośrednio:

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

— Gabriel Hurley
źródło

1

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

— Chưa biết
źródło

0

Moje rozwiązanie, aby to zrobić:

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

— Matt
źródło