CSS/Eigenschaften/content

Die Eigenschaft content ermöglicht es, auf vielfältige Art und Weise für die Pseudoelemente before und after Inhalte erzeugen.

Erlaubte Werte

• none: nichts wird angezeigt
• normal: wie none
• Inhalt [ / Alternativinhalt ]

Bei dem Inhalt kann es sich um ein einzelnes Bild oder um eine durch Leerzeichen getrennte Liste aus Inhaltselementen handeln. Besteht die Liste aus einem einzelnen Bild, dann ist es möglich, hinter einem / einen zugänglichen Alternativinhalt anzugeben.

Inhaltselemente können sein:

• Text: eine Zeichenkette (in Anführungszeichen)
• Bild: ein Bild, angegeben durch url(), image-set() oder einen Gradienten
• Zähler: Referenzieren einer Zählfunktion (counter() oder counters()
• Attributwert: Auslesen eines HTML-Attributwerts mit attr()
• Anführungszeichen: Die verwendeten Anführungszeichen richten sich nach der quotes-Eigenschaft.
  • open-quote: Öffnendes Anführungszeichen ausgeben und Schachtelungszähler erhöhen
  • close-quote: Schließendes Anführungszeichen ausgeben und Schachtelungszähler verringern
  • no-open-quote: Nichts ausgeben, aber Schachtelungszähler erhöhen
  • no-close-quote: Nichts ausgeben, aber Schachtelungszähler vermindern

Die CSSWG ist bei generierten Inhalten ziemlich aktiv, hier könnte sich in 2025 einiges tun.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

normal

anwendbar auf

• Vollständig anwendbar auf Pseudoelemente mit eigener CCS Box (::before, ::after, ::marker, ::placeholder
• Auf alle Elemente, wenn nur ein einzelnes Bild angegeben wird, es ersetzt dann den Elementinhalt
• Page-Margin Boxen für Print-CSS

Vererbung

nein

animierbar

nein

Beispiel

abbr::before, 
abbr::after {
  content: "*";
}

Der Inhalt des abbr-Elements wird in Sternchen eingeschlossen.

Siehe auch

• ::before und ::after

Weblinks

• Spezifikation (CSSWG): CSS Generated Content Level 3