W3docs
de
Anmelden

CSS ::after Pseudo-Element

Das ::after CSS-Pseudo-Element fügt Inhalt nach dem Element ein. Erklärung und Beispiele.

Das CSS ::after Pseudo-Element erstellt ein zusätzliches Element, das als letztes Kind des ausgewählten Elements eingefügt wird, direkt nach seinem eigentlichen Inhalt. Sie fügen Ihrem HTML keine Markup-Elemente hinzu — der Browser erzeugt das Element aus Ihrem Stylesheet. Diese Seite erklärt, was ::after ist, wie die erforderliche content-Eigenschaft funktioniert, welche Fallstricke zu beachten sind und in welchen Situationen es besonders nützlich ist.

Was ::after ist

::after ermöglicht es Ihnen, generierten Inhalt — Zeichen, Textzeichenfolgen, ein Bild oder eine dekorative Form — an das Ende eines Elements anzuhängen, ohne das HTML des Dokuments zu verändern. Da die generierte Box Teil des Elements ist, können Sie sie animieren, positionieren oder wie normalen Inhalt floaten.

Zwei Regeln sind grundlegend:

  • Die content-Eigenschaft ist zwingend erforderlich. Wenn Sie content weglassen, wird das Pseudo-Element nie erstellt. Verwenden Sie content: "" (einen leeren String), wenn Sie nur eine dekorative Box ohne Text möchten.
  • Standardmäßig ist die Box inline. Setzen Sie display: block (oder inline-block), wenn Sie Breite, Höhe oder vertikale Abstände verwenden möchten.

::after vs. :after

::after kann auch mit der Einzel-Doppelpunkt-Notation :after geschrieben werden. Die Doppel-Doppelpunkt-Form ist der moderne CSS3-Standard für Pseudo-Elemente (um sie von Pseudo-Klassen wie :hover zu unterscheiden); die Einzel-Doppelpunkt-Form existiert nur für die Abwärtskompatibilität mit älteren Browsern. Bevorzugen Sie ::after, es sei denn, Sie müssen ältere Engines wie Internet Explorer 8 unterstützen.

::after vs. ::before

Das ::before Pseudo-Element fügt generierten Inhalt vor dem Inhalt des Elements ein, während ::after ihn danach einfügt. Ansonsten sind sie identisch und werden häufig zusammen verwendet — zum Beispiel sind ::before und ::after die klassische Methode, um passende öffnende und schließende Anführungszeichen oder dekorative Klammern um eine Überschrift hinzuzufügen.

Warnung

Generierter Inhalt ist kein Teil des DOM: Er kann nicht vom Benutzer ausgewählt werden, und die meisten Screenreader ignorieren ihn (die Unterstützung ist browserübergreifend uneinheitlich). Verwenden Sie ::after ausschließlich für rein dekorative oder ergänzende Inhalte — fügen Sie niemals inhaltlich bedeutsame Informationen, die der Benutzer lesen muss, in content ein.

Info

Die mit ::after und ::before erstellten Pseudo-Elemente gelten nicht für ersetzte Elemente wie <img> und <br>, da diese Elemente keinen Dokumentinhalt haben, um den herum etwas eingefügt werden könnte.

Version

CSS Pseudo-Elements Level 4

Selectors Level 3

Syntax

CSS ::after Pseudo-Element

::after {
  css declarations;
}

Beispiel des ::after Pseudo-Elements:

CSS ::after Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::after { 
        content: " - William Shakespeare.";
      }
    </style>
  </head>
  <body>
    <h2>::after selector example</h2>
    <p>"Be or not to be"</p>
  </body>
</html>
Probier es selbst »

Im folgenden Beispiel können dem Inhalt Stile hinzugefügt werden.

Beispiel des ::after Pseudo-Elements mit gestaltetem Inhalt:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::after { 
        content: " - William Shakespeare.";
        background-color: #eee;
        color: #1c87c9;
        padding: 5px 3px;
        border: 2px dashed #000;
        margin-left: 5px;
      }
    </style>
  </head>
  <body>
    <h2>::after selector example</h2>
    <p>"Be or not to be"</p>
  </body>
</html>
Probier es selbst »

Häufige Anwendungsfälle

::after eignet sich hervorragend, wenn Sie zusätzlichen visuellen Inhalt hinzufügen möchten, ohne Ihr Markup zu verunreinigen:

  • Dekorative Formen und Trennlinien. Eine Box aus content: "" kombiniert mit einem border oder background — Unterstreichungen, Pfeile, Bänder, Tooltip-Spitzen.
  • Icons nach Links. Fügen Sie einen Pfeil für externe Links oder eine Dateitype-Markierung nach einem <a> an.
  • Der Clearfix-Trick. Zwingen Sie ein übergeordnetes Element, seine gefloateten Kindelemente einzuschließen.
/* External-link arrow after every link with target="_blank" */
a[target="_blank"]::after {
  content: " ↗";
}

/* Clearfix: make a container wrap its floated children */
.clearfix::after {
  content: "";
  display: block;   /* block + clear pushes the box below the floats */
  clear: both;
}

Beachten Sie das leere content: "" beim Clearfix: Es erstellt die Box ohne sichtbaren Text, was genau das ist, was Sie für einen rein layout-bezogenen Helfer benötigen.

Tipps und Fallstricke

  • Kein content, kein Element. Das Vergessen der content-Eigenschaft ist der häufigste Grund, warum eine ::after-Regel „nichts bewirkt".
  • display für die Größenanpassung setzen. Ein inline Pseudo-Element ignoriert width, height sowie obere und untere Abstände. Verwenden Sie display: block oder inline-block.
  • Sorgfalt bei Anführungszeichen. Innerhalb von content-Strings sollten Sie Sonderzeichen mit ihrem Unicode-Codepunkt escapen (z. B. content: "\00BB" für »), damit die Dateicodierung sie nicht beschädigen kann.

Übungen

Übung
Was bewirkt das ::after Pseudo-Element in CSS?
Was bewirkt das ::after Pseudo-Element in CSS?
Was this page helpful?