Woher weiß Joomla bzw. der Browser, welches Symbol die CSS-Anweisung content: "" meint?

Immer wieder stoße ich in CSS-Dateien auf die Codezeile content: "" - meist im Zusammenhang mit :before und :after

Im Zusammenhang mit Font awesome dachte ich bisher, dass zwischen den Anführungszeichen zwingend der Code des Awesome-Symbols stehen muss. Also z. B. content: "\f000".

Ich frage mich, woher der Browser denn nun trotzdem weiß, welches Symbol er einsetzen soll, wenn zwischen beiden Anführungszeichen gar nichts steht. Unverständlicherweise macht er es tatsächlich richtig. Offenbar kann das leere "" für alles und jedes stehen.

Kann jemand mein Unwissen lindern, damit ich nicht länger an Zauberei glauben muss? Oder hat jemand einen Tipp in Bezug auf ein Lehrbuch bzw. eine PDF-Anleitung, das/die dies erklärt?

Danke für Deinen Tipp. Ich habe die Seite besucht.

Aber ich hab's immer noch nicht verstanden. Vielleicht muss ich das auch nicht - solange die entsprechenden Webseiten funktionieren.

Meine ursprüngliche Motivation war die Frage: Was muss ich beim content: "" zwischen die Anführungszeichen setzen, wenn ich ein anderes Symbol erscheinen lassen möchte? Und: Wenn ich anschließend diesen Inhalt wieder lösche, bin ich dann automatisch wieder beim vorherigen Zustand? Wird mir dann wieder das vorherige Symbols angezeigt? Das kann doch nach meiner Auffassung nicht sein, weil "" alle möglichen Symbole bedeuten kann.

Aber lassen wir das! Gibt Schlimmeres im Leben ...

Vielen Dank, Astrid!

Ich habe die Mediaevent-Seite besucht und finde die Erklärungen auch sehr verständlich. Nur leider ist dort auch nicht beschrieben, wofür genau das "" steht. Oder aber ich hab's trotz aller Verständlichkeit immer noch nicht verstanden.

Im Folgenden ein Ausschnitt aus einer meiner custom.css (Template RSVivo):

Im ersten Fall von :before erscheint im Menü ein PLUS-Zeichen.

Unten, im zweiten Fall :after aber erscheint dort ein CHEVRON-DOWN-Symbol

In beiden Fällen aber steht obenan dasselbe content: "". Woher weiß das System, dass "" einmal bedeutet "Plus-Zeichen" und ein anderes Mal "Chevron-Down"?

Konkret möchte ich damit experimentieren, dort andere Symbole erscheinen zu lassen. Kann ich dazu einfach die entsprechenden Fontawesome-Codes zwischen die Anführungszeichen setzen, also z. B.: content: "\f182" im :before-Fall und content: "\f183" im :after-Fall ?

CSS-Code:

.rstpl-navigation .navbar .navbar-inner .rstpl-template-menu > li .submenu-button:before {

content: "";

background-color: #fff;

position: absolute;

border-radius: 2px;

transition: .3s cubic-bezier(.8, .5, .2, 1.4);

width: 20px;

height: 1px;

top: 14px;

left: 4px;

-webkit-transform: rotate(0deg) scaleX(1);

-moz-transform: rotate(0deg) scaleX(1);

-ms-transform: rotate(0deg) scaleX(1);

-o-transform: rotate(0deg) scaleX(1);

transform: rotate(0deg) scaleX(1)

}

.rstpl-navigation .navbar .navbar-inner .rstpl-template-menu > li .submenu-button:after {

content: "";

background-color: #fff;

position: absolute;

border-radius: 2px;

transition: .3s cubic-bezier(.8, .5, .2, 1.4);

width: 20px;

height: 1px;

top: 14px;

left: 4px;

-webkit-transform: rotate(90deg) scaleX(1);

-moz-transform: rotate(90deg) scaleX(1);

-ms-transform: rotate(90deg) scaleX(1);

-o-transform: rotate(90deg) scaleX(1);

transform: rotate(90deg) scaleX(1)

}

Zitat von Dudlhofer

Könnte sein, dass da noch ein JavaScript mit reinspuckt und den Content-Wert zur Laufzeit manipuliert.

Zitat von Sieger66

Wenn ich das richtig verstehe ist das

content: "";

also möglicherweise nur ein Platzhalter.

Ja, aber dann müsste es ja irgendwo einen Code geben, der definiert, welcher Inhalt an die Stelle des Platzhalters gesetzt werden soll. In der CSS finde ich diesen Fontawesome-Code nicht. Sollte er in einer Javascript-Datei definiert sein?

Zitat von Re:Later

Dein Codebeispiel aus #5 macht alleinstehend nicht mehr als ein Rechteck darstellen mit weißem Hintergrund.

Wenn bei dir also irgendwas dargestellt wird, ein Pluszeichen z.B., dann kommt das woanders her, von einer content-CSS-Regel, die hierachisch höher steht, als dein leerer Content. Prüfe das mit deinem Browser-Inspektor. Dabei ist das auch egal, ob JS da die Regel erzeugt oder nicht. Der Inspektor zeigt es trotzdem an. Du solltest darin auch die Zeile mit deinem leeren content sehen, halt durchgstrichen und ausgegraut.

Wenn du es da gar nicht siehst, bist halt mit deinen Tests in der falschen CSS-Datei oder Cache oder wasimmer auch.

Und sollte trotz leerem content im Inspektor trotzdem was angezeigt werden, siehst du das ja auch im Inspektor, halt dann nicht im CSS-Teil, sondern vielleicht im HTML-Teil. Vielleicht ein Bild oder so. Und auch da ist es egal, wer/was das einsetzt. Der Inspektor zeigt im Unterschied zum Seitenquelltext den finalen Echtzustand an.

EDIT: Dein Codebeispiel wird vermutlich auch nicht automatisch FontAwesome verwenden, weil die font-family in der Anweisung fehlt. Es könnte also auch ein stinknormales Pluszeichen sein, je nach Zeichen, dass du da einträgst. "Normale" Buchsteben können ja auch einfach mit so "\f183"-Dingern angezeigt werden. Hängt alles von der font-family ab, welcher Schrift-Font genommen wird.

Alles anzeigen

Danke für Deine Anregungen.

Ein Pluszeichen ist es sicher nicht, denn die Verwandlung vom Plus ins Chevron-down braucht ein paar Zehntelsekunden. Während dieser Zeit sehe ich, dass Plus und Chevron nicht einfach ausgetauscht bzw. überblendet werden, sondern vom Mittelpunkt des :before Pluszeichens verschwindet der senkrechte Strich und der waagerechte Strich teilt sich in zwei Teilstriche, die dann jeweils um 45° nach oben geklappt werden, woraus dann ein Chevron-down oder besser vielleicht eine Art in die Breite gezogenes V entsteht.

Testweise habe ich jetzt im Inspektor (unter Pseudoelemente) die Farbe des :before-Teils oben von Weiss in Rot geändert, dann stellt sich das Gebilde im Browser so dar, wie hier im Anhang. Oben vor hellblauem Hintergrund der eingeklappte Zustand eines Submenüs, unten vor dunkelblauem HG der ausgeklappte. Und wenn ich das content: ""; im Inspektor lösche, ändert das gar nichts, d. h. darauf kann auch verzichtet werden!

Du hast Recht, ich habe mich geirrt: Da werden gar keine awesomen Fonts ausgetauscht, sondern nur mit einfachen animierten Strichen "gespielt". Da mein Denkansatz falsch war, werde ich mein experimentelles Ansinnen nicht weiterverfolgen. Ich beschließe, dass ich gar nicht wissen muss, was das content: ""; da überhaupt soll, wenn man es auch weglassen kann und das Symbol trotzdem richtig funktioniert.

Ich muss mich korrigieren: Ich habe ja das content: ""; zuerst nur in meiner custom.css gelöscht und dabei ganz übersehen, dass dann die originale template.css das übernimmt. Wenn ich das content: ""; auch hier lösche, verschwindet der rote Strich im ein- und ausgeklappten Zustand ganz. Die Zeile ist also doch nicht verzichtbar.

Hier der Link zu der Test-/Entwicklungsseite:

https://test.kip-cloud.de

Sie ist meistens deaktiviert. Ich schalte sie nur vorübergehend online, wenn ich etwas ausprobieren will ohne die Produktivseite zu manipulieren.

Ich lasse sie heute bis spätabends aktiv.

Zitat von Re:Later

Korrekt. Ohne explizites content:""; keine Striche. Ist Muss damit width, height und background-color was "zum Greifen" haben. Und da es :before und :after gibt, sinds 2 Striche. Und da die absolute positioniert sind, werden sie eben durch das degree 0 und 90 zu einem Kreuz.

Und durch weiteres CSS im Aktiv-Status zu einem Chevron-Down hingebastelt. Das werden dann wohl degrees +45 und -45 sein.

Ohne plödes Icon-Font-Kacka.

EDIT: Nette Idee übrigens. Da ich meine Font-Icons immer einbette statt per CSS spart mir das zukünftig Getue für "Öffnen"- und "Offen"-Status.

Ein leerer <div></div> hat halt per se einen Inhalt = "" und wird deshalb direkt mit width, height und background-color zu einem gefärbten Rechteck.

Alles anzeigen

Danke für Deine Erläuterungen. Immer wieder habe ich mich in den letzten Jahren gefragt, was das content: "" eigentlich macht und habe an eine Art mir nicht begreiflicher Magie gedacht, weil ich annahm, dass Joomla dort aus irgendeinem mir unerfindlichen Grund das gewünschte Fontawesome-Icon einsetzt. Jetzt hat dieser Irrglaube endlich ein Ende ...