Ein kleines Design-Detail kann manchmal einen riesigen Unterschied machen. Eine dezente, halbe Unterstreichung der Überschrift oder ein markierter Text zieht sofort den Blick auf sich ohne aufdringlich zu wirken.

In diesem Tutorial zeige ich dir, wie du genau diesen Effekt mit ein paar Zeilen CSS erstellst. Du brauchst dafür kein Plugin und kannst den Code sowohl in Divi als auch in Elementor nutzen.

Play

Halbe Unterstreichung mit CSS in Divi erstellen

Schritt 1: Text oder Überschrift vorbereiten

Öffne in Divi das Modul mit deinem Text oder deiner Überschrift.
Wechsle vom visuellen Reiter in den Text-Reiter und füge an der Stelle, an der du den Effekt sehen möchtest, folgenden Code ein:

<span class="sp-highlight">Dein unterstrichener Text</span>

„Dein unterstrichener Text“ tauschst du entsprechend mit deinem gewünschten Text aus.

Beispiel:

Schritt 2: CSS im Customizer hinterlegen

Damit der Effekt sichtbar wird, fügst du das CSS im WordPress-Customizer hinzu.

So geht’s:

Verlasse den Page-Builder, in dem du in der oberen Leiste auf „Beenden Sie Visual Builder“ klickst. Gehe dann ganz links in deiner oberen WordPress-Menü-Leiste auf den Namen deiner Website (neben dem Haus-Icon) und klicke auf Theme Customizer.

Alternativ kannst du auch über dein WordPress-Dashboard gehen. Über den Menüpunkt Design – Customizer gelangst du zum gleichen Punkt. Vorteil der ersten Variante ist es, dass du direkt bei der von dir erstellten Seite bleibst und deine Änderungen visuell vor dir siehst.

Gehe nun ganz unten zum Punkt „Zusätzliches CSS“ und füge folgenden Code ein:

/* halbe Unterstreichung */
.sp-highlight {
  background: linear-gradient(120deg, #dae8ea 0%, #dae8ea 100%);
  background-repeat: no-repeat;
  background-size: 100% 40%;
  background-position: 0 90%;
  padding: 0 10px;
}

An der Stelle, an der mein Farbcode (#dae8ea) hinterlegt ist, fügst du deinen gewünschten Farbcode ein.

Wenn du eine dickere oder dünnere Linie möchtest, kannst du die zweite Zahl bei background-size (im Beispiel 40%) verändern.

Im Video oben zeige ich im Detail, was passiert, wenn du einzelne Zahlen und Werte im Code veränderst.

Sobald du den CSS-Block einmal im Customizer gespeichert hast, gilt er für die gesamte Website. Du kannst also denselben Effekt in beliebigen Texten und Überschriften wiederverwenden, egal auf welcher Seite.

Halbe Unterstreichung in Elementor hinzufügen

Schritt 1: Modul auswählen

Öffne in Elementor entweder ein Überschriften- oder ein Text-Modul. Wechsle dort vom visuellen Modus in den Code-Reiter und füge denselben Span-Tag ein wie oben:

<span class="sp-highlight">Dein unterstrichener Text</span>

Hier zeige ich das am Beispiel einer Überschrift:

Schritt 2: CSS einfügen

Speichere deine Änderungen und verlasse den Elementor Builder. Gehe auf die Seite, die du gerade erstellt hast und klicke im WordPress-Menü oben auf Customizer. Klicke auf Custom CSS/JS und füge den entsprechenden Code ein.

/* halbe Unterstreichung */
.sp-highlight {
  background: linear-gradient(120deg, #dae8ea 0%, #dae8ea 100%);
  background-repeat: no-repeat;
  background-size: 100% 40%;
  background-position: 0 90%;
  padding: 0 10px;
}

Einmal gespeichert, funktioniert der Effekt automatisch auf allen Seiten, auf denen du die Klasse sp-highlight nutzt.

Wenn du mehrere Farbvarianten nutzen möchtest (z. B. eine hellere oder dünnere Variante für die Unterstreichung in den Fließtexten), kannst du einfach zusätzliche Klassen anlegen: z. B. .sp-highlight-text und .sp-highlight-headline. So kannst du unterschiedliche Unterstreichungen für unterschiedliche Textarten anlegen.

Fertig!
Mit diesen wenigen Zeilen CSS bekommst du einen modernen, eleganten Unterstreich-Effekt, den du auf jeder WordPress-Website einsetzen kannst. Ich wünsch dir ganz viel Spaß beim Ausprobieren.