Meine liebsten CSS Code Snippets: How to Text highlighten und hervorheben

Manchmal möchtest Du Textteile auf Deiner Website besonders hervorheben. Wie Du das ganz einfach mit CSS Code à la Textmarker machen kannst, zeige ich Dir im Video.

Highlight it! 🟨

Wenn Du Textteile hervorheben willst, kannst Du das machen, indem Du den Text fett oder kursiv machst, unterstreichst oder ihm eine andere Farbe gibst.

Oder mit ein bisschen CSS kannst Du auch den Hintergrund ändern, dann hast Du zum Beispiel einen Textmarker Effekt.

Wie das geht, zeige ich Dir im Video. Den Code dazu findest Du unten.

Tool-Tipps

Elementor Pro*

*Affiliate-Link. Wenn Du über diesen Link etwas kaufst, kostet es Dich nichts extra, aber ich erhalte eventuell eine kleine Provision, die ich direkt in mein Galão Projekt reinvestiere 😊

Code

CSS für das individuelle CSS:

.highlight {
  background-color: #FBF719;
  padding: 0 6px;
}

Einfügen entweder auf Widget Ebene im Text-Editor Widget unter Einstellungen > Erweitert > Eigene CSS oder seitenübergreifend im Elementor Menü oben links > Drei Striche > Website Einstellungen > Individuelle CSS.

HTML Code für den Text, den Du highlighten möchtest:

<span class="highlight">DEIN TEXT</span>

Einfügen im Text-Editor Widget > Content > Text-Editor > Tab Text.

Zum besseren Verständnis: Was der Code macht

.highlight
Das ist der Name der vergebenen CSS-Klasse, die auf das HTML-Element angewendet wird , z. B. mit class="highlight".

background-color: #FBF719;
Setzt die Hintergrundfarbe des Elements, in diesem Fall ein helles Gelb, ähnlich einer Textmarkierung.

padding: 0 6px;
Definiert den Innenabstand zwischen Inhalt (z. B. Text) und Rand des Elements. 0 → oben und unten kein Abstand; 6px → links und rechts jeweils 6 Pixel Abstand.

Der Text bekommt damit einen gelben Hintergrund und etwas horizontalen Abstand, damit der Text nicht direkt am Rand klebt. Das Ergebnis: Ein „wichtiger Hinweis“ erscheint gelb hinterlegt und leicht nach links und rechts gepolstert:

Das ist ein wichtiger Hinweis.

Wo fügst Du den CSS Code ein?

Den Code kopierst Du und fügst ihn in Deine Website an, am Besten übergeordnet in den Elementor Website-Einstellungen, damit er auf allen Unterseiten greift, wo ein Textblock mit dem Text Editor im Einsatz ist.

Alternativ kannst Du den CSS Code auch eingeben unter Dashboard > Design > Customizer > Zusätzliches CSS, dann wird er auch seitenübergreifend geladen.

Hex Codes für die Neonfarben

Neon Rot: #FF0000
Neon Orange: #FF5F1F
Neon Gelb: #FFFF00
Neon Grün: #00FF00
Neon Blau: #0000FF
Neon Pink: #FF00FF
Neon Violett: #BC13FE

Fazit

Mit diesem einfachen Inline‑CSS kannst Du einzelne Textstellen sofort wie mit einem Textmarker hervorheben; ideal, wenn Du schnell einen wichtigen Hinweis direkt im Text Editor bei Elementor oder im Block Editor in einem Blogbeitrag hervorheben willst. Viel Spaß beim Ausprobieren!