6.1 Die Eigenschaft content
Die Pseudoelemente ::before und ::after ermöglichen es, Inhalte vor und nach dem Inhalt eines Elements hinzuzufügen, ohne den HTML-Code zu verändern.
Sie werden oft für dekorative Zwecke, die Verbesserung der Benutzeroberfläche und die Erstellung interaktiverer Webseiten verwendet.
Was sind ::before und ::after Pseudoelemente?
Die Pseudoelemente ::before und ::after erzeugen virtuelle Elemente, die entsprechend vor und nach
dem Inhalt des ausgewählten Elements eingefügt werden. Diese Pseudoelemente werden häufig verwendet, um Icons, dekorative
Elemente oder andere visuelle Effekte hinzuzufügen.
Syntax von before:
selektor::before {
content: "Text oder andere Werte";
/* Styles */
}
Syntax von after:
selektor::after {
content: "Text oder andere Werte";
/* Styles */
}
Die Eigenschaft content
Die Schlüssel-Eigenschaft für die Pseudoelemente ::before und ::after ist content. Diese Eigenschaft definiert den Inhalt
des Pseudoelements. Es kann ein Textstring, ein Bild oder sogar ein leerer Wert sein, wenn nur ein visueller Effekt benötigt wird.
Mögliche Werte der content-Eigenschaft:
- Text:
"Text" - Bild:
url("path/to/image.png") - Leerer Wert:
"" - Attribute:
attr(attributeName) - Zähler:
counter(name)
6.2 Beispiele für die Verwendung von ::before und ::after
Hinzufügen dekorativer Elemente
Beispiel 1: Hinzufügen eines Icons vor Text
In diesem Beispiel wird das Pseudoelement ::before verwendet, um ein Icon vor den Text eines Links hinzuzufügen.
margin-right fügt Platz zwischen dem Icon und dem Text ein:
/* Hinzufügen eines Icons vor Text eines Links */
a::before {
content: "🔗";
margin-right: 5px;
}
Beispiel 2: Hinzufügen eines dekorativen Elements nach einem Absatz
In diesem Beispiel fügt das Pseudoelement ::after ein dekoratives Element nach einem Absatz hinzu. display: block und
text-align: right werden verwendet, um das Element rechts auszurichten:
/* Hinzufügen eines dekorativen Elements nach einem Absatz */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
Erstellen dekorativer Rahmen und Hintergründe
Beispiel 3: Dekorativer Rahmen um ein Element
In diesem Beispiel wird das Pseudoelement ::before verwendet, um einen dekorativen Streifen über dem Element
div zu erstellen. position: absolute und top: -10px positionieren den Streifen über dem Element:
/* Dekorativer Rahmen um ein Element */
div::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
Beispiel 4: Automatisches Hinzufügen von Anführungszeichen
In diesem Beispiel werden die Pseudoelemente ::before und ::after verwendet, um Anführungszeichen um einen Zitatblock hinzuzufügen:
/* Automatisches Hinzufügen von Anführungszeichen um ein Zitat */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
Beispiel 5: Nummerierung der Überschriften
In diesem Beispiel wird das Pseudoelement ::before verwendet, um eine Nummer vor der Überschrift h2 hinzuzufügen.
counter-increment erhöht den Zählerwert, und content: counter(section) fügt den aktuellen Zählerwert ein:
/* Nummerierung der Überschriften */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
6.3 Anwendung und Stil von Pseudoelementen
Styling von Pseudoelementen
Pseudoelemente können wie andere Elemente gestylt werden. Sie unterstützen die meisten CSS-Eigenschaften, einschließlich Farbe, Hintergrund, Ränder, Größe und Positionierung.
Verwendung von Pseudoelementen für komplexe Layouts
Pseudoelemente werden oft verwendet, um dekorative Elemente in Layouts zu erstellen, wie Rahmen, Schatten und andere visuelle Effekte, ohne zusätzliche HTML-Elemente hinzuzufügen.
Beispiel: Jedes Listenelement hat einen blauen Marker vor dem Text:
ul li::before {
content: "•";
color: blue;
margin-right: 5px;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
6.4 Vollständige Implementierung
/* Hinzufügen eines Icons vor Text eines Links */
a::before {
content: "🔗";
margin-right: 5px;
}
/* Hinzufügen eines dekorativen Elements nach einem Absatz */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
/* Dekorativer Rahmen um ein Element */
.decorative-box {
position: relative;
}
.decorative-box::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
/* Automatisches Hinzufügen von Anführungszeichen um ein Zitat */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
/* Nummerierung der Überschriften */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beispiel für die Pseudoelemente ::before und ::after</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">Link mit Icon</a>
<p>Absatz mit dekorativem Element dahinter</p>
<div class="decorative-box">Element mit dekorativem Rahmen</div>
<blockquote>Zitat mit automatischen Anführungszeichen</blockquote>
<h2>Überschrift mit Nummerierung</h2>
<h2>Noch eine Überschrift</h2>
</body>
</html>
GO TO FULL VERSION