Dekorative Muster mit Pseudoelementen
Erstellen Sie mit ::before und ::after dekorative Formen, Trennlinien und Overlays ohne zusätzliches HTML.
Dekorative Muster mit Pseudoelementen ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Philosophie der reinen CSS-Dekoration
Pseudoelemente ermöglichen umfangreiche dekorative Effekte ohne zusätzliches HTML. Das Ziel: null divs für die Dekoration – sämtliche visuelle Gestaltung gehört in CSS.
CSS-Dreieck
Erstellen Sie Dreiecke mit Elementen ohne Größe und transparenten Rahmen:
<div class="triangle"></div>Tooltip-Pfeil
Ein Tooltip-Pfeil mit ::before:
<div class="tooltip" style="position:relative;display:inline-block;background:#333;color:#fff;padding:6px 12px;border-radius:4px;margin-top:16px;">Tooltip text</div>Diagonale Abschnittstrennlinie
Eine schräge Abschnittstrennlinie mit skew oder clip-path auf ::after:
<div class="section" style="background:linear-gradient(135deg,#4f8cff,#7ee787);height:120px;position:relative;"></div>Dekorative Unterstreichungen
Animierte Unterstreichungseffekte mit ::after:
<a href="#">Hover me (underline animates in on :hover)</a>Badge mit ::after
Ein Benachrichtigungs-Badge als Overlay ohne zusätzliche HTML-Elemente:
<span class="nav-icon" data-count="3" style="position:relative;display:inline-block;font-size:1.5rem;margin:16px;">🔔</span>Farbverlauf-Overlay auf Bildern
Ein dunkles Farbverlauf-Overlay über Bildern für bessere Lesbarkeit von Text:
<div class="card-image" style="width:100%;height:160px;background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>Häkchen mit ::before
Ein benutzerdefiniertes Kontrollkästchen-Häkchen, gezeichnet mit CSS-Rahmen:
<div class="custom-check" style="width:20px;height:20px;background:#34c759;border-radius:4px;padding:2px;"></div>Ribbon-Banner
Ein Ribbon-Effekt auf Karten mit ::before und negativer Positionierung:
<div class="card featured" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;width:200px;">Featured product</div>Schimmernder Ladeeffekt
Ein CSS-Skeleton-Ladeeffekt mit Schimmer, ganz ohne JavaScript:
<div class="skeleton" style="width:100%;height:60px;border-radius:6px;"></div>Kurzer Test
Welche Kombination von Eigenschaften erzeugt ein reines CSS-Dreieck, das nach oben zeigt?
Zusammenfassung
Pseudoelemente ermöglichen umfangreiche dekorative Muster ohne zusätzliches HTML: Pfeile, Overlays, animierte Unterstreichungen, Badges, Bänder und Schimmereffekte. Sie basieren alle auf content: "" + position: absolute + einer kreativen Verwendung von Rahmen, clip-path und Transformationen.
Häufig gestellte Fragen
Ist die Lektion „Dekorative Muster mit Pseudoelementen“ kostenlos?
Ja — der vollständige Text von „Dekorative Muster mit Pseudoelementen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Dekorative Muster mit Pseudoelementen“?
Erstellen Sie mit ::before und ::after dekorative Formen, Trennlinien und Overlays ohne zusätzliches HTML. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Dekorative Muster mit Pseudoelementen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- ::before- und ::after-Inhalte
- ::placeholder, ::selection und ::marker
- CSS-Zähler mit ::before
- Dekorative Muster mit Pseudoelementen