CSS-Textmarker-Generator
Text wie mit einem Textmarker hervorheben: Marker, Box oder Pinselstrich, Farbe, Höhe und optionale Animation – CSS kopieren.
Der CSS-Textmarker-Generator hebt Textstellen wie mit einem Leuchtstift hervor. Zur Wahl stehen ein Marker-Streifen, eine farbige Box und ein Pinselstrich mit ungleichmäßigen Rändern. Farbe, Deckkraft, Höhe, Lage und optional eine Zeichen-Animation sind einstellbar. Auch über mehrere Zeilen sieht der Effekt dank box-decoration-break sauber aus.
Schnellwahl Farbe
<p>Mit CSS lassen sich <mark class="highlight">wichtige Aussagen wie mit einem Textmarker hervorheben</mark>, ganz ohne Bilder.</p>Textmarker-Effekte mit CSS
Der Effekt entsteht aus einem Hintergrundverlauf, der nur einen Teil der Zeilenhöhe einnimmt.
Über background-size und background-position steuerst du Höhe und Lage,
also ob der Streifen den Text ganz bedeckt oder nur unterstreicht.
| Stil | Wirkung |
|---|---|
| Marker | Streifen im unteren Teil der Zeile, wie mit Leuchtstift |
| Box | Ganze Zeile farbig hinterlegt, mit Radius |
| Pinsel | Ungleichmäßige Ränder durch zwei überlagerte Verläufe |
Achte auf genug Kontrast zwischen Text und Markerfarbe; prüfen kannst du das im Farbkontrast-Prüfer.
Häufige Fragen
Warum ein mark-Element?
mark kennzeichnet Text semantisch als hervorgehoben. Der Generator setzt die Standard-Gelbfärbung zurück und ersetzt sie durch den eigenen Effekt. Für reine Dekoration ohne Bedeutung kannst du auch ein span verwenden.
Wie sieht der Marker über mehrere Zeilen aus?
Mit box-decoration-break: clone bekommt jede Zeile ihren eigenen Hintergrund samt Innenabstand und Radius. Ohne diese Eigenschaft würde der Effekt an Zeilenumbrüchen abgeschnitten.
Wie funktioniert die Animation?
Der Marker ist ein linear-gradient als Hintergrundbild. Die Animation lässt background-size von 0 % auf 100 % wachsen, sodass der Streifen wie mit einem Stift gezogen erscheint. Bei reduzierter Bewegung erscheint er sofort.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.