9.1 Pseudoelemente ::before und ::after
Die Pseudoelemente ::before und ::after sind mächtige Werkzeuge in CSS, mit denen du dekorative
Elemente vor oder nach dem Inhalt von Elementen hinzufügen kannst, ohne das HTML zu ändern. Sie werden häufig verwendet, um visuelle
Effekte zu erzeugen, das User Interface zu verbessern und Stile zu Elementen hinzuzufügen.
Beschreibung:
::before: Pseudoelement, das vor dem Inhalt eines Elements hinzugefügt wird::after: Pseudoelement, das nach dem Inhalt eines Elements hinzugefügt wird
Syntax:
element::before {
/* Stile für das Pseudoelement before */
}
element::after {
/* Stile für das Pseudoelement after */
}
Wesentliche Eigenschaften
Die Pseudoelemente ::before und ::after können fast alle CSS-Eigenschaften enthalten, einschließlich Farbe, Größe,
Positionierung, Hintergrund, Schatten usw. Damit das Pseudoelement jedoch sichtbar ist, muss ihm Inhalt und Größe zugewiesen werden.
content: definiert den Inhalt des Pseudoelements. Kann Text oder ein Bild sowie eine leere Zeichenkette seindisplay: legt den Anzeige-Typ des Pseudoelements fest. Normalerweise wirdblockoderinline-blockverwendetposition: steuert die Positionierung des Pseudoelements (z.B.absoluteoderrelative)widthundheight: legen die Größe des Pseudoelements fest
9.2 Hinzufügen von Text
Mit der Eigenschaft content kannst du leicht Text am Anfang oder Ende eines jeden Elements hinzufügen.
.example::before {
content: "Anfang: ";
color: blue;
}
.example::after {
content: " :Ende";
color: red;
}
<body>
<p class="example">Dies ist ein Beispieltext</p>
</body>
Erklärung des Codes:
.example::before: fügt den Text "Anfang: " vor dem Inhalt des Elements hinzu und färbt ihn blau.example::after: fügt den Text " :Ende" nach dem Inhalt des Elements hinzu und färbt ihn rot
9.3 Dekorative Linien
Du kannst auch dekorative Linien hinzufügen, die den Inhalt umrahmen:
.decorative-line::before,
.decorative-line::after {
content: "";
display: block;
height: 2px;
background: black;
margin: 10px 0;
}
<body>
<div class="decorative-line">Text mit dekorativen Linien</div>
</body>
Erklärung des Codes:
.decorative-line::before: erzeugt eine dekorative Linie vor dem Inhalt des Elements.decorative-line::after: erzeugt eine dekorative Linie nach dem Inhalt des Elements
9.4 Einfügen von Icons
Nicht genug Text? Dann kannst du einfach ein paar Icons einfügen:
.icon::before {
content: url('https://via.placeholder.com/20');
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
<body>
<p class="icon">Text mit Icon</p>
</body>
Erklärung des Codes:
.icon::before: fügt ein Icon vor dem Text hinzu, indem die URL eines Bildes verwendet wird
9.5 Komplexe dekorative Elemente
Komm, lass uns etwas Komplexeres hinzufügen:
.complex-decor::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f06, transparent);
position: absolute;
top: -10px;
left: -10px;
}
.complex-decor {
position: relative;
padding: 20px;
background: #eee;
margin: 20px;
}
<body>
<div class="complex-decor">Element mit dekorativer Ecke</div>
</body>
Erklärung des Codes:
.complex-decor::before: erstellt ein dekoratives Element vor dem Hauptinhalt, indem ein Gradient und absolute Positionierung verwendet werden.complex-decor: setzt relative Positionierung für das Elternelement, damit das Pseudoelement sich relativ dazu positionieren kann
9.6 Verwendung von Animationen
Du kannst sogar Animationen hinzufügen:
.animated::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: red;
animation: rotate 5s infinite;
margin: 20px auto;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
<body>
<div class="animated"></div>
</body>
Erklärung des Codes:
.animated::before: erstellt ein quadratisches Pseudoelement und animiert dessen Drehung mit Hilfe von Schlüsselbildern
GO TO FULL VERSION