Fügen Sie nach jedem Listenelement ein Bild ein

143

Was wäre der beste Weg, um nach jedem Listenelement ein kleines Bild einzufügen? Ich habe es mit einer Pseudoklasse versucht, aber etwas stimmt nicht ...

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

Vielen Dank für jede Hilfe!

css Zac
quelle

Antworten:

326

Der einfachere Weg ist einfach:

ul li:after {
    content: url('../images/small_triangle.png');
}
Jimyi
quelle
Und auch einige Probleme damit in Firefox
Johnny_D
204
Seien Sie sich bewusst, dass IE7 scheiße ist.
Big McLargeHuge
@RichardGarside Mit "doctype" meinen Sie oben nur so etwas? <!DOCTYPE html>
Joe Morano
Das Problem bei dieser Methode besteht darin, dass Sie keinen alternativen Text für das Bild bereitstellen können, was (je nachdem, wofür das Bild verwendet wird) die Zugänglichkeit beeinträchtigen kann.
Damien
2
Sie können dem Bild jedoch keine Höhe / Breite geben.
Faisal Ashfaq
82

Versuche dies:

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

Du brauchst das content: ""; Deklaration, um Ihren generierten Elementinhalt anzugeben, auch wenn dieser Inhalt "nichts" ist.

Außerdem habe ich die Syntax / Reihenfolge Ihrer backgroundDeklaration korrigiert.

Tyson
quelle
13
Ich mag diese Technik gegenüber den einfacheren, weil Sie damit die Größe des Bildes mithilfe der Hintergrundbildgröße steuern können.
Andrew Hedges
2
Sie benötigen dies auch, wenn Sie ein Bild horizontal zentrieren möchten. Sie können es nicht positionieren, left: 50%da es nicht zur Mitte ausgerichtet wäre. Verwenden Sie left: 0; width: 100%stattdessen die Hintergrundposition und stellen Sie sie auf 50% ein. Funktioniert gut für mich. Vielen Dank für den Tipp zum gewünschten contentAttribut.
Ygoe
1
Dies war die bessere Antwort. Wenn Sie Bootstrap verwenden, müssen Sie möglicherweise display: inline-block verwenden. Andernfalls befindet sich das Bild unter jedem Objekt und nicht rechts oder links
Marvel Moe
1
Sieht gut aus, aber um das Bild inline anzuzeigen (nach dem "li"), sollte es "display: inline-block" sein.
Deadpool
und auchbackground-size: container
Roger
11

Für die IE8-Unterstützung darf die Eigenschaft "content" nicht leer sein.

Um dies zu umgehen, habe ich Folgendes getan:

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

Hinweis: Dies funktioniert auch mit Bild-Sprites

jonnocraig
quelle
4

Ich denke, Ihr Problem ist, dass das Element: after psuedo-Element die darin festgelegte Eigenschaft content: erfordert. Sie müssen ihm sagen, dass er etwas einfügen soll. Sie können das Bild sogar direkt einfügen lassen:

ul li:after {
    content: url('../images/small_triangle.png');
}
Gabriel Hurley
quelle
1 
ul li + li:before
{
    content:url(imgs/separator.gif);
}
Chưa biết
quelle
0

Meine Lösung dafür:

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