CSS ::after-Pseudoelement

In CSS erstellt ::after ein Pseudoelement, das das letzte Kind des ausgewählten Elements ist. Es generiert Inhalte, die nach dem ursprünglichen Inhalt des Elements erscheinen. Es kann verwendet werden, um Zeichen, Textzeichenfolgen oder Bilder einzufügen.

Der Wert wird durch die content-Eigenschaft definiert.

Standardmäßig ist das ::after-Pseudoelement inline.

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

Das ::after-Pseudoelement kann auch mit der Notation mit einem einzelnen Doppelpunkt :after verwendet werden, die von allen Browsern unterstützt wird.

Das ::before-Pseudoelement fügt Inhalte vor allen anderen Inhalten hinzu, während das ::after-Pseudoelement Inhalte nach allen anderen Inhalten in HTML hinzufügt.

INFO

Die mit ::after und ::before erstellten Pseudoelemente gelten nicht für ersetzte Elemente (z. B. <br>, <img>).

Version

CSS Pseudo-Elements Level 4

Selectors Level 3

Syntax

CSS ::after-Pseudoelement

css

::after {
  css declarations;
}

Beispiel für das `::after`-Pseudoelement:

CSS ::after-Beispiel

html

<!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>

Try it Yourself »

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

Beispiel für das `::after`-Pseudoelement mit formatiertem Inhalt:

Beispiel für das ::after-Pseudoelement mit formatiertem Inhalt:

html

<!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>

Try it Yourself »

Praxis

Was macht das ::after-Pseudoelement in CSS?

Es fügt Inhalte vor dem ausgewählten Element ein.Es fügt Inhalte nach dem ausgewählten Element ein.Es ermöglicht das Formatieren von ausgewähltem Text.Es wird in Verbindung mit der content-Eigenschaft verwendet.

CSS ::after-Pseudoelement ​

Version ​

Syntax ​

Beispiel für das ::after-Pseudoelement: ​