CSS Pseudo-Elements

Pseudo-Elements fügen virtuelle Elemente zu deinem HTML hinzu, ohne das DOM zu verändern. Mit zwei Doppelpunkten :: gekennzeichnet.

Was sind Pseudo-Elements?

Pseudo-Elements erstellen zusätzliche Elemente die nicht im HTML existieren:

Pseudo-Element Syntax

selector::pseudo-element {
    property: value;
}

/* Beispiel */
p::before {
    content: "➤ ";
}

Wichtig:

✅ Modern: Zwei Doppelpunkte ::before
⚠️ Alt: Ein Doppelpunkt :before (funktioniert noch)
Nutze immer ::!

::before - Vor dem Content

Fügt Content vor dem Element-Inhalt ein:

::before Basics

p::before {
    content: "💡 ";  /* content ist PFLICHT! */
}

/* HTML */
<p>Dies ist ein Tipp</p>

/* Darstellung */
💡 Dies ist ein Tipp

content ist Pflicht! Ohne content erscheint nichts.

::after - Nach dem Content

Fügt Content nach dem Element-Inhalt ein:

::after Basics

p::after {
    content: " ✓";
}

/* HTML */
<p>Abgeschlossen</p>

/* Darstellung */
Abgeschlossen ✓

content - Was einfügen?

Verschiedene Arten von Content:

content Property:

/* Text */
.element::before {
    content: "Text hier";
}

/* Leer (für Styling) */
.element::before {
    content: "";
}

/* Anführungszeichen */
.element::before {
    content: open-quote;
}

.element::after {
    content: close-quote;
}

/* Attribut-Wert */
a::after {
    content: attr(href);  /* URL des Links */
}

/* Unicode */
.element::before {
    content: "\2713";  /* ✓ */
    content: "\2022";  /* • */
}

/* Kombiniert */
a::after {
    content: " (" attr(href) ")";
}

/* Counter */
h2::before {
    content: counter(section) ". ";
}

Praktische Beispiele

Beispiel 1: Icons hinzufügen

Icon vor Text

.success::before {
    content: "✓ ";
    color: #28a745;
    font-weight: bold;
}

.error::before {
    content: "✗ ";
    color: #dc3545;
    font-weight: bold;
}

.info::before {
    content: "ⓘ ";
    color: #007bff;
    font-weight: bold;
}

Beispiel 2: Link URL anzeigen (Print)

URLs im Print

@media print {
    a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #6c757d;
    }
}

Beispiel 3: Tooltips

CSS-only Tooltip

.tooltip {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted #6c757d;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background-color: #333;
    color: white;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.tooltip:hover::after {
    opacity: 1;
}

/* HTML */
<span class="tooltip" data-tooltip="Dies ist ein Tooltip">
    Hover mich
</span>

Beispiel 4: Dekorative Elemente

Dekorative Linien

h2 {
    position: relative;
    padding-bottom: 10px;
}

h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(to right, #007bff, transparent);
}

Beispiel 5: Quote Marks

Stylische Anführungszeichen

blockquote {
    position: relative;
    padding: 20px 20px 20px 60px;
    font-style: italic;
}

blockquote::before {
    content: "\201C";  /* " */
    position: absolute;
    left: 10px;
    top: 0;
    font-size: 60px;
    color: #007bff;
    opacity: 0.3;
    line-height: 1;
}

Beispiel 6: Clearfix

Clearfix Hack

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Für Float-Layouts */
.container {
    /* Kinder mit float */
}

.container::after {
    content: "";
    display: block;
    clear: both;
}

Beispiel 7: Breadcrumb Separator

Breadcrumb Navigation

.breadcrumb {
    display: flex;
    gap: 10px;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child)::after {
    content: "›";
    margin-left: 10px;
    color: #6c757d;
}

/* HTML */
<ul class="breadcrumb">
    <li>Home</li>
    <li>Products</li>
    <li>Item</li>
</ul>

/* Darstellung: Home › Products › Item */

Beispiel 8: Ribbon/Badge

Ribbon Badge

.card {
    position: relative;
    overflow: hidden;
}

.card::before {
    content: "NEW";
    position: absolute;
    top: 10px;
    right: -30px;
    background-color: #dc3545;
    color: white;
    padding: 5px 40px;
    transform: rotate(45deg);
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

Beispiel 9: Custom Bullets

Custom List Bullets

ul {
    list-style: none;
    padding-left: 0;
}

ul li {
    position: relative;
    padding-left: 25px;
}

ul li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: #007bff;
    font-weight: bold;
}

Beispiel 10: Progress Bar

Progress Bar

.progress {
    width: 100%;
    height: 30px;
    background-color: #e9ecef;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.progress::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 75%;  /* Progress */
    background: linear-gradient(to right, #007bff, #0056b3);
    border-radius: 15px;
    transition: width 0.3s;
}

.progress::after {
    content: "75%";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-weight: bold;
    font-size: 14px;
}

::first-letter - Erster Buchstabe

Drop Cap (großer Anfangsbuchstabe):

::first-letter

p::first-letter {
    font-size: 3em;
    font-weight: bold;
    color: #007bff;
    float: left;
    line-height: 1;
    margin-right: 5px;
}

/* Oder dekorativ */
p::first-letter {
    font-family: Georgia, serif;
    font-size: 4em;
    color: #dc3545;
}

Nur auf Block-Elementen!

::first-line - Erste Zeile

Erste Zeile stylen:

::first-line

p::first-line {
    font-weight: bold;
    color: #007bff;
    text-transform: uppercase;
}

/* Nur limitierte Properties erlaubt:
   font, color, background, text-decoration, etc. */

::selection - Markierter Text

Aussehen von selektiertem Text:

::selection

::selection {
    background-color: #007bff;
    color: white;
}

/* Firefox */
::-moz-selection {
    background-color: #007bff;
    color: white;
}

/* Nur für bestimmte Elemente */
p::selection {
    background-color: #ffc107;
    color: #333;
}

::placeholder - Input Placeholder

Placeholder-Text stylen:

::placeholder

input::placeholder {
    color: #6c757d;
    opacity: 0.7;
    font-style: italic;
}

/* Vendor Prefixes */
input::-webkit-input-placeholder {
    color: #6c757d;
}

input::-moz-placeholder {
    color: #6c757d;
}

input:-ms-input-placeholder {
    color: #6c757d;
}

::marker - Listen-Marker

Custom List-Marker:

::marker (Neu!)

li::marker {
    color: #007bff;
    font-size: 1.5em;
}

/* Oder Content ändern */
li::marker {
    content: "✓ ";
    color: #28a745;
}

Modern, nicht alle Browser!

Kombiniert mit Pseudo-Classes

Pseudo-Elements + Pseudo-Classes

/* Hover + Before */
button:hover::before {
    content: "→ ";
}

/* Focus + After */
input:focus::after {
    content: " ✓";
    color: #28a745;
}

/* Nth-child + Before */
li:nth-child(odd)::before {
    content: "▸ ";
    color: #007bff;
}

Styling Pseudo-Elements

Volle CSS-Power:

Komplexe Styles

.element::before {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    background-color: #007bff;
    border-radius: 50%;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

.element:hover::before {
    transform: translateX(-50%) scale(1.2);
}

Limitations

Was geht NICHT:

Einschränkungen

/* Nicht bei selbstschließenden Elementen */
img::before { }   /* ❌ Funktioniert nicht */
input::before { } /* ❌ Funktioniert nicht */
br::before { }    /* ❌ Funktioniert nicht */

/* Nicht verschachtelbar */
p::before::after { } /* ❌ Geht nicht */

/* Nur limitierte Properties bei ::first-letter/::first-line */

Selbstschließende Elemente:

<img>
<input>
<br>
<hr>
<meta>
<link>

Best Practices

✅ DO:

Zwei Doppelpunkte :: nutzen
content: "" für rein dekorative Elements
Dekorative Elemente (Icons, Linien)
Nicht-kritischen Content (erscheint nicht bei Screen Readers)
Tooltips ohne JavaScript
Breadcrumb Separators
Progress Indicators

❌ DON'T:

Nicht für wichtigen Content (SEO/Accessibility!)
Nicht bei <img>, <input> etc.
Nicht übertreiben (Code-Komplexität)
Nicht als Ersatz für echtes HTML
Nicht content vergessen (erscheint sonst nicht)

Accessibility-Überlegungen

Pseudo-Elements sind nicht im DOM:

Accessibility

/* ❌ SCHLECHT - Wichtige Info */
.price::after {
    content: " € inkl. MwSt.";
}
/* Screen Reader sieht das nicht! */

/* ✅ BESSER - Im HTML */
<span class="price">
    99,99 <span class="sr-only">Euro inklusive Mehrwertsteuer</span>
</span>

/* ::before/::after nur für Dekoration */
.icon::before {
    content: "★";  /* OK, rein dekorativ */
}

Counter - Automatische Nummerierung

CSS Counters

body {
    counter-reset: section;
}

h2 {
    counter-increment: section;
}

h2::before {
    content: counter(section) ". ";
    color: #007bff;
    font-weight: bold;
}

/* Verschachtelte Counter */
body {
    counter-reset: section;
}

h2 {
    counter-reset: subsection;
    counter-increment: section;
}

h2::before {
    content: counter(section) ". ";
}

h3 {
    counter-increment: subsection;
}

h3::before {
    content: counter(section) "." counter(subsection) " ";
}

📝 Quiz

Was ist der Unterschied zwischen ::before und ::after?

Kein Unterschied::before fügt vor dem Content ein, ::after danach::after ist moderner::before ist schneller

📝 Quiz

Warum funktioniert ::before nicht bei <img>?

Bug im Browser<img> ist selbstschließend und hat keinen Content::before ist veraltetMan braucht ein Plugin

⚡

Tipps & Tricks

attr() für dynamischen Content

Nutze HTML-Attribute in CSS:

/* Tooltip aus data-Attribut */
[data-tooltip]::after {
    content: attr(data-tooltip);
    /* Styling... */
}

/* Link-URL anzeigen beim Drucken */
@media print {
    a::after {
        content: " (" attr(href) ")";
    }
}

/* Sprach-Indicator */
[lang]::before {
    content: "[" attr(lang) "] ";
}

Counters für automatische Nummerierung

CSS Counters für Kapitel und Listen:

body {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: counter(section) ". ";
}

/* Verschachtelt */
h3 {
    counter-reset: subsection;
}

h3::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}

Loading Dots Animation

Animierte Loading-Indicator nur mit CSS:

.loading::after {
    content: "";
    display: inline-block;
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: ""; }
    40% { content: "."; }
    60% { content: ".."; }
    80%, 100% { content: "..."; }
}

::before und ::after für Icons

Icon-Fonts oder Symbole ohne Extra-HTML:

/* Checkmark für Success */
.success::before {
    content: "✓";
    color: #28a745;
    margin-right: 8px;
}

/* Arrow für Links */
.external-link::after {
    content: "→";
    margin-left: 4px;
}

/* Download Icon */
.download::before {
    content: "⬇";
    margin-right: 6px;
}

Übungsaufgaben

Aufgabe 1: Custom Links

Style Links mit ::after:

Externes Link-Icon nach URL
Nur bei externen Links
Mit attr(href)

Aufgabe 2: Fancy Heading

Erstelle eine Überschrift mit:

Linie links (::before)
Linie rechts (::after)
Zentrierter Text

Aufgabe 3: Tooltip

Baue einen CSS-only Tooltip:

::after für Tooltip-Box
attr(data-tooltip) für Text
Position absolute
Nur bei :hover sichtbar

Nächste Schritte

Du kennst jetzt:

✅ ::before und ::after
✅ content Property
✅ ::first-letter und ::first-line
✅ ::selection
✅ ::placeholder und ::marker
✅ Praktische Anwendungen
✅ CSS Counters
✅ Limitations & Best Practices

CSS ist jetzt komplett!

Als Nächstes geht es weiter mit JavaScript:

JavaScript Basics
DOM Manipulation
Events
Und vieles mehr!

Weiter so! 🚀

CSS Pseudo-Elements - ::before, ::after & mehr

CSS Pseudo-Elements

Was sind Pseudo-Elements?

::before - Vor dem Content

::after - Nach dem Content

content - Was einfügen?

Praktische Beispiele

Beispiel 1: Icons hinzufügen

Beispiel 2: Link URL anzeigen (Print)

Beispiel 3: Tooltips

Beispiel 4: Dekorative Elemente

Beispiel 5: Quote Marks

Beispiel 6: Clearfix

Beispiel 7: Breadcrumb Separator

Beispiel 8: Ribbon/Badge

Beispiel 9: Custom Bullets

Beispiel 10: Progress Bar

::first-letter - Erster Buchstabe

::first-line - Erste Zeile

::selection - Markierter Text

::placeholder - Input Placeholder

::marker - Listen-Marker

Kombiniert mit Pseudo-Classes

Styling Pseudo-Elements

Limitations

Best Practices

✅ DO:

❌ DON'T:

Accessibility-Überlegungen

Counter - Automatische Nummerierung

📝 Quiz

📝 Quiz

Tipps & Tricks

attr() für dynamischen Content

Counters für automatische Nummerierung

Loading Dots Animation

::before und ::after für Icons

Übungsaufgaben

Nächste Schritte

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

CSS Backgrounds & Borders - Hintergründe & Rahmen stylen

CSS Basics - Deine Seite gestalten

CSS Box Model - margin, padding, border verstehen