CSS/Eigenschaften/generierter Inhalt/content

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | generierter Inhalt(Weitergeleitet von Content)
Wechseln zu: Navigation, Suche

Mit der Eigenschaft content können Sie auf vielfältige Art und Weise für die Pseudoelemente before und after Inhalte erzeugen.

  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

Die Eigenschaft content kann folgende Werte annehmen:

  • none: Pseudoelement wird nicht erzeugt
  • normal: wirkt wie none
  • attr(Attribut): liest den gewählten Attributwert des Elternelements aus
  • counter(): (name, string, list-style-type) fügt alle Zähler mit Namen als Inhalt ein und stellt sie in dem angegebenen Listenstil dar (z. B. decimal 1,2,3 ..., upper-latin I, II, III …)
  • close-quote: fügt ein schließendes Hochkomma ein
  • no-close-quote: zählt die CSS-Eigenschaft quotes herunter
  • no-open-quote: zählt die CSS-Eigenschaft quotes hoch
  • open-quote: fügt ein öffnendes Hochkomma ein
  • string: fügt einen von Hochkommata (') oder Anführungszeichen (") zu umschließenden Text ein (siehe Zeichenketten in CSS für weitere Hinweise)
  • URI: ist eine externe Ressource – z. B. die Adresse eines Bildes

Sie können mehrere Werte durch ein Leerzeichen getrennt kombinieren, um sie hintereinander zu schreiben.

Beachten Sie, dass generierte Inhalte für ersetzte Elemente, also etwa img oder input nicht spezifiziert sind.
Beachten Sie, dass es sich bei Pseudoelementen technisch gesehen um Nachfahren des Elementes handelt, zu dem sie gehören. Dies stellt Anforderungen an dessen Sichtbarkeit. Beachten Sie dazu beide Hinweise zur Abgrenzung der visibility-Eigenschaft.

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
<p class="Achtung">
  Der Begriff <abbr>CSS</abbr> ist eine Abkürzung.
  Für weiterführende Informationen schlagen Sie bitte im 
  <a href="https://wiki.selfhtml.org">Selfhtml-Wiki</a>
  nach.
</p>
Das Beispiel enthält ein Absatz mit Text und einem abbr-Kindelement, sowie einem Link.
  
      p {
        border: 1px solid red;
        padding: 0.5em;
      }
      p::before {
        display:    block;
        background: red;
        color:      white;
        font:       bold 16px sans-serif;
        margin:     -0.5em -0.5em 0.5em -0.5em;
        padding:    0.5em;
        content:    attr(class);
      }			   
      abbr {
        background: lightgreen;
        color: white;
      }
      abbr::before, abbr::after {
        content: "*";
      }
      a {
        color: #780000;
      }
      a::after {
        content: url("https://src.selfhtml.org/dok.gif");
        margin-left: .1em;
      }
Mit CSS werden die Elemente nun mittles eingefügter Pseudoelemente gestalteT:
  1. In dem p-Element wird ein Blockelement erzeugt, das den Klassennamen (content: attr(class);) des Absatzes enthält.
  2. Der Inhalt des abbr-Elements wird in Sternchen (content: '*';) eingeschlossen.
  3. Der Verweis erhält eine Grafik (content: url(...);).

Siehe auch[Bearbeiten]