wake-up-neo.com

Warum brauche ich eine leere Content-Eigenschaft auf einem :: after-Pseudo-Element?

Ich habe http://jsfiddle.net/8p2Wx/2/ aus einer vorherigen Frage, die ich gestellt habe, und ich sehe diese Zeilen:

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

Wenn ich content:"" wegnehme, ruiniert es den Effekt und ich verstehe nicht, warum es notwendig ist.

Warum ist es notwendig, eine leere content zu :after und :before Pseudoelementen hinzuzufügen?

22
qwertymk

Sie können den generierten Inhalt nicht formatieren, ohne zu definieren, wie der Inhalt aussehen soll. Wenn Sie wirklich keinen Inhalt benötigen, sondern nur ein zusätzliches "unsichtbares Element", um es zu formatieren, können Sie es auf die leere Zeichenfolge (content: '') setzen.

Es ist leicht, dies selbst zu bestätigen: http://jsfiddle.net/mathias/YRm5V/

Das Snippet, das Sie gepostet haben, ist übrigens der Micro-Clearfix-Hack, der hier erklärt wird: http://nicolasgallagher.com/micro-clearfix-hack/

Für Ihre zweite Frage benötigen Sie ein HTML5-Shiv (kleines Stück JavaScript), um <nav> in einigen älteren Browsern ansprechbar zu machen.

23
Mathias Bynens

Wie die CSS-Spezifikation. zustände:: after und: before Pseudo-Elemente werden nicht generiert, wenn prop. content ist nicht auf einen anderen Wert als 'normal' und 'none' gesetzt: http://www.w3.org/TR/CSS2/generate.html#content

content Anfangswert ist "normal" und "normal" berechnet für "vor" und "nach" nach "Pseudoelemente" den Wert "none".

4
luissquall

CSS hat eine Eigenschaft namens content. Es kann nur mit den Pseudoelementen: after und: before verwendet werden. Es wird wie ein Pseudo-Selektor (mit Doppelpunkt) geschrieben, aber es wird als Pseudo-Element bezeichnet, da es eigentlich nichts auswählt, was auf der Seite vorhanden ist, sondern der Seite etwas Neues hinzufügt

sehen Sie dies zur besseren Erklärung: 

  1. Css-Inhalt 1
  2. Css-Inhalt 2

und das nav-Element lautet:

Eines der neuen Elemente für HTML 5 ist das Element, mit dem Sie Verknüpfungen zusammenfassen können, was zu mehr semantischem Markup und zusätzlicher Struktur führt, was Bildschirmlesern helfen kann. In diesem Artikel werde ich besprechen, wie und wo ich es verwenden soll, sowie einige Vorbehalte, die ich bei der Spezifikationsdefinition habe.

  1. Html5 TAGS
0
Jack