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.

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.
  • CSS 2.0
  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>content</title>
    <style>
      body {
        width: 30em;
        font-family: sans-serif;
      }
      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("http://wiki.selfhtml.org/mediawiki/skins/selfhtml/external.png");
        margin-left: .1em;
      }
    </style>
  </head>
  <body>
    <p class="Achtung">
      Der Begriff <abbr>CSS</abbr> ist eine Abkürzung.
      Für weiterführende Informationen schlagen Sie bitte im 
      <a href="http://wiki.selfhtml.org">Selfhtml-Wiki</a>
      nach.
    </p>
  </body>
</html>
  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(...);).


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.

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML