Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

CSS/Eigenschaften/generierter Inhalt/content

Aus SELFHTML-Wiki
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.

PSeudoelement im Seiteninspektor

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]