2012-12-31 5 views
10

I wollte CSS3 des :empty psedo-Selektor und CSS3 der content Eigenschaft verwenden gemeinsam einen Text zu leeren Listen hinzufügen, wie in dieser Geige gezeigt:CSS3: leer Selektor und Inhalt Eigenschaft

http://jsfiddle.net/ZesAC/2/

I gelernt, dass CSS nur content in :after oder :before Selektoren ermöglicht. Gibt es eine Lösung, mit der man leere Listen gestalten kann?

EDIT

Wie ich in den Kommentaren gelernt, stellt sich heraus, Sie können Verwendung content überall in CSS3 (keine Wirkung in den meisten Browsern [Stand 2012.12.31]) und nur in :after und :before Blöcke in CSS2. (Danke @BoltClock)

Wenn es Ihnen nichts ausmacht, Firefox spezifisch zu sein, können Sie den -moz-only-whitespace Selektor verwenden, um es ein wenig logischer zu machen. (Danke @robertc)

+1

CSS3 des 'content' Eigenschaft ist überall erlaubt, aber die Umsetzung ist fast nicht existent. Die content-Eigenschaft von CSS2 ist nur in ': after' und': before' erlaubt. – BoltClock

+0

@BoltClock Ahh, ich wurde von dem, was ich lese, in die Irre geführt. Danke für die Köpfe hoch. – Crisfole

Antwort

12

Stellt sich heraus, ich meine eigene Frage in dem Fragen beantwortet:

http://jsfiddle.net/M6xZj/2/

Sie :after mit dem :empty Elemente verwenden können, etwas nach dem UL hinzuzufügen. Es ist schließlich leer, so dass es garantiert ist, wo die Liste war.

+4

[Vorsicht mit ': empty'] (http://jsfiddle.net/robertc/M6xZj/3/), siehe auch [': -moz-only-whitespace'] (https://developer.mozilla.org/de-DE/docs/CSS /: - moz-only-whitespace) (leider kein Standard). – robertc

+0

Dank @robertc. Ich weiß das: leer hat ein vage/sehr dummes Verhalten. Schätze die Warnung! Habe jetzt nicht nur 'whitespace'! :) Das ist ziemlich cool. – Crisfole

8

.some_class_name:empty:after{ content: "-"; }