mozilla
Ihre Suchergebnisse

    ::after (:after)

    Übersicht

    Das ::after CSS Pseudoelement entspricht einem virtuellen letzten Kindelement des ausgewählten Elements. Normalerweise wird es verwendet, um kosmetischen Inhalt zu einem Element hinzuzufügen, indem die content CSS Eigenschaft verwendet wird. Dieses Element ist standardmäßig inline.

    Syntax

    element:after  { Stileigenschaften }  /* CSS2 Syntax */
    
    element::after { Stileigenschaften }  /* CSS3 Syntax */

    Die ::after Schreibweise (mit zwei Doppelpunkten) wurde in CSS 3 eingeführt, um eine Differenzierung zwischen Pseudoklassen und Pseudoelementen zu ermöglichen. Browser akzeptieren auch die :after Schreibweise (mit einfachem Doppelpunkt), die in CSS 2 eingeführt wurde.

    Beispiele

    Einfache Verwendung

    Es werden zwei Klassen erstellt, eine für langweilige Absätze und eine für interessante. Anschließend kann jeder Absatz durch hinzufügen eines Pseudoelements an dessen Ende markiert werden.

    <p class="langweiliger-text">Hier steht langweiliger Text.</p>
    <p>Hier steht durchschnittlicher Text, der weder langweilig noch interessant ist.</p>
    <p class="interessanter-text">An MDN mitzuwirken ist einfach und macht Spaß.
    Einfach nur die 'BEARBEITEN' Schaltfläche anklicken, um Onlinebeispiele hinzuzufügen
    oder bestehende Beispiele zu verbessern.</p>
    .interessanter-text::after {
       content:    "⇐ Dies ist *wirklich* interessant!"; 
       color:      green;
    }
    
    .langweiliger-text::after {
       content:    "⇐ LANGWEILIG!";
       color:      red;
    }

    Ergibt:

    Dekoratives Beispiel

    Text oder Bilder, die über die content Eigenschaft angegeben werden, können beliebig gestaltet werden.

    <span class="ribbon">Beachte wo sich die orange Box befindet.</span>
    .ribbon {
       background-color: #5BC8F7;
    }
    
    .ribbon::after {
       content:          "Beachte diese orange Box.";
       background-color: #FFBA10;
       border-color:     black;
       border-style:     dotted;
    }

    Ergibt:

    Tooltips

    Das folgende Beispiel zeigt die Verwendung des ::after Pseudoelements in Verbindung mit der attr() CSS Funktion und einem data-descr benutzerdefinierten Datenattribut, um einen rein CSS-basierten  to create a pure-CSS, glossarähnlichen Tooltip zu erstellen. Dieses Beispiel wird unten angezeigt, kann aber auch in einer separaten Seite angesehen werden.

    <p>Hier ist ein Onlinebeispiel des oberen Codes.<br />
      Hier steht <span data-descr="Sammlung von Wörtern und Punktionation">Text</span> mit ein
      paar <span data-descr="Kleine Popups, welche angezeigt und wieder ausgeblendet werden">Tooltips</span>.<br />
      Mit der Maus über die unterstrichenen Wörter fahren, um Tooltips hierzu anzuzeigen.
    </p>
    
        span[data-descr] {
            position: relative;
            text-decoration: underline;
            color: #00F;
            cursor: help;
        }
    
        span[data-descr]:hover::after {
            content: attr(data-descr);
            position: absolute;
            left: 0;
            top: 24px;
            min-width: 200px;
            border: 1px #aaaaaa solid;
            border-radius: 10px;
            background-color: #ffffcc;
            padding: 12px;
            color: #000000;
            font-size: 14px;
            z-index: 1;
        }

    Ergibt:

    Spezifikationen

    Spezifikation Status Anmerkung
    CSS Transitions Arbeitsentwurf Erlaubt Übergänge für Eigenschaften, die für Pseudoelemente definiert sind.
    CSS Animations Arbeitsentwurf Erlaubt Animationen für Eigenschaften, die für Pseudoelemente definiert sind.
    Selectors Level 3
    Die Definition von '::after' in dieser Spezifikation.
    Empfehlung Führt die Syntax mit zwei Doppelpunkten ein.
    CSS Level 2 (Revision 1)
    Die Definition von '::after' in dieser Spezifikation.
    Empfehlung Ursprüngliche Definition mit der Syntax mit einfachem Doppelpunkt.

    Browser Kompatibilität

    Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    :after support (Ja) 1.0 (1.7 oder früher) [1] 8.0 4 4.0
    ::after support (Ja) 1.5 (1.8) [1] 9.0 7 4.0
    Unterstützung für Animationen und Übergänge 26 4.0 (2.0) Nicht unterstützt Nicht unterstützt Nicht unterstützt
    Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    :after support ? ? ? ? ?
    ::after support ? ? ? ? ?
    Unterstützung für Animationen und Übergänge 26 4.0 (4.0) Nicht unterstützt Nicht unterstützt Nicht unterstützt

    [1] Firefox hat vor Version 3.5 nur die CSS 2.0 Variante :after implementiert. Nicht erlaubt waren position, float, list-style-* und einige Anzeigeeigenschaften. Firefox 3.5 hat diese Beschränkungen aufgehoben.

    Siehe auch

     

    Schlagwörter des Dokuments und Mitwirkende

    Mitwirkende an dieser Seite: Sebastianz
    Zuletzt aktualisiert von: Sebastianz,