CSS ::after Pseudo Element

Das Pseudo-Element ::after ist ein generiertes Inhaltselement, das jede Art von Inhalt nach dem Inhalt hinzufügt.

Der Wert wird durch die Eigenschaft content definiert.

Voreingestellt ist das Pseudo-Element ::after inline.

Das Pseudo-Element ::after kann verwendet werden, um jede Art von Inhalt einzufügen, einschließlich Zeichen, Textketten und Bilder.

Es kann wie jeder andere Inhalt animiert, positioniert oder schwebend dargestellt werden.

Das Pseudo-Element ::after kann auch mit einer Doppelpunkt-Notation :before verwendet werden, die auch von allen Browsern unterstützt wird.

Version

CSS2

Syntax

::after {
css declarations;
}

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p::after { 
      content: " - William Shakespeare.";
      }
    </style>
  </head>
  <body>
    <h2>::after selector example</h2>
    <p>"Sein oder Nichtsein"</p>
  </body>
</html>

Versuch es selber!

Im angegebenen Beispiel können dem Inhalt Styles hinzugefügt werden:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>"Sein oder Nichtsein"</p>
  </body>
</html>