Manchmal soll nicht die komplette Überschrift oder der ganze Absatz farbig sein, sondern nur ein einzelnes Wort. Zusätzlich soll der Unterstrich eine andere Farbe haben als der Text – zum Beispiel orange Schrift mit blauer Linie. Genau dafür eignet sich ein kleines span-Element mit einer eigenen CSS-Klasse.
Der Vorteil dieser Methode: Der restliche Text bleibt ein normaler Absatz oder eine normale GenerateBlocks-Headline. Nur das gewünschte Wort erhält die besondere Gestaltung.
1. Das Grundprinzip
Aus diesem normalen Text:
Wir erstellen besondere Webseiten.wird:
Wir erstellen <span class="highlight-text">besondere</span> Webseiten.Das span-Element erzeugt keinen neuen Absatz. Es eignet sich deshalb ideal für einzelne Wörter oder kurze Textteile innerhalb einer Zeile.
2. Die CSS-Klasse definieren
Das passende CSS kann zum Beispiel so aussehen:
.highlight-text {
color: #ff9933;
text-decoration-line: underline;
text-decoration-color: #3399cc;
text-decoration-thickness: 3px;
text-underline-offset: 5px;
}Damit erhält das Wort:
- orange Schrift,
- einen blauen Unterstrich,
- eine 3 Pixel starke Linie,
- 5 Pixel Abstand zwischen Text und Linie.
3. Warum text-decoration-color wichtig ist
Wenn du nur:
text-decoration: underline;verwendest, übernimmt der Unterstrich normalerweise die Textfarbe. Mit text-decoration-color wird die Linie unabhängig vom Wort eingefärbt.
Genau dadurch sind Kombinationen wie:
- schwarzer Text + orange Linie,
- orange Text + blaue Linie,
- weißer Text + farbige Linie
möglich.
4. Unterstrich dicker machen
Die aktuelle CSS-Eigenschaft lautet:
text-decoration-thickness: 3px;Moderne Browser unterstützen diese Eigenschaft breit. Statt Pixeln kannst du auch relative Werte verwenden:
text-decoration-thickness: 0.12em;Dann wächst die Linie proportional mit der Schriftgröße.
5. Abstand zwischen Wort und Unterstrich
Mit:
text-underline-offset: 5px;verschiebst du die Linie nach unten. Gerade bei großen Headlines sieht die Standard-Unterstreichung häufig zu dicht am Text aus.
Auch hier sind relative Werte möglich:
text-underline-offset: 0.15em;6. Kurzform für die Dekoration
Ein Teil der Eigenschaften kann auch in einer einzigen Zeile geschrieben werden:
text-decoration: underline solid #3399cc 3px;Den Abstand setzt du trotzdem separat:
text-underline-offset: 5px;Für gut lesbares CSS finde ich die getrennten Eigenschaften bei Designarbeiten häufig übersichtlicher.
7. Wo der Span in Gutenberg eingefügt wird
Wenn der normale Rich-Text-Editor für deine gewünschte Kombination keine direkte Bedienoberfläche anbietet, kannst du den betreffenden Block über das Block-Menü als HTML bearbeiten.
Dann ersetzt du nur das gewünschte Wort durch:
<span class="highlight-text">Wort</span>Anschließend wechselst du wieder in die visuelle Bearbeitung.
8. Nicht den ganzen Block als HTML neu schreiben
Für ein einzelnes Wort musst du keinen kompletten Absatz in einen Custom-HTML-Block verwandeln. Das wäre unnötig und würde die normale Gutenberg-Bearbeitung erschweren.
Der Absatz bleibt ein normaler Absatz- oder Headline-Block. Lediglich ein kleiner Inline-Span wird ergänzt.
9. GenerateBlocks-Headline
Auch in einer GenerateBlocks-Headline gilt dasselbe Prinzip. Die Überschrift bleibt ein H2-, H3- oder anderes Headline-Element. Innerhalb des Textes kann ein span für die Hervorhebung verwendet werden.
Das ist semantisch sauberer, als die Überschrift in mehrere getrennte Headline-Blöcke zu zerlegen, nur weil ein Wort eine andere Farbe erhalten soll.
10. Wo das CSS gespeichert werden sollte
Du kannst die Klasse an mehreren sinnvollen Stellen verwalten:
- WordPress „Zusätzliches CSS“,
- Child-Theme,
- dein bestehendes CSS-Snippet-Plugin,
- ein zentral verwalteter Site-Style.
Wichtig ist weniger der konkrete Ort als eine konsistente Organisation. Dieselbe Klasse sollte nicht an mehreren Stellen widersprüchlich definiert werden.
11. Beispiel mit deinen Markenfarben
Wenn du beispielsweise Orange #ff9933 und Blau #3399cc verwendest:
.highlight-text {
color: #ff9933;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: #3399cc;
text-decoration-thickness: 3px;
text-underline-offset: 5px;
}Diese Gestaltung lässt sich danach an beliebig vielen Stellen wiederverwenden.
12. Nur die Linie farbig, Text normal
Wenn das Wort dieselbe Textfarbe wie der übrige Satz behalten soll:
.underline-accent {
text-decoration-line: underline;
text-decoration-color: #ff9933;
text-decoration-thickness: 3px;
text-underline-offset: 5px;
}Du lässt einfach die color-Eigenschaft weg.
13. Nur das Wort färben, ohne Unterstrich
.text-accent {
color: #ff9933;
}Eine eigene Klasse pro Designzweck kann übersichtlicher sein als eine große Klasse mit vielen späteren Ausnahmen.
14. Gepunktete oder wellige Linie
CSS unterstützt verschiedene Dekorationsstile:
text-decoration-style: solid;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;Für professionelle Überschriften ist solid meist am ruhigsten. Eine wellige Linie wirkt eher dekorativ oder verspielt.
15. Dicke Linie als grafisches Designelement
Wenn der Unterstrich deutlich stärker und fast wie ein Markerbalken wirken soll, kann text-decoration an Grenzen stoßen. Dann ist ein Hintergrundverlauf oft flexibler.
Beispiel:
.highlight-marker {
color: #ff9933;
background-image: linear-gradient(
transparent 72%,
#3399cc 72%,
#3399cc 90%,
transparent 90%
);
}Die blaue Fläche liegt hier optisch hinter dem unteren Teil der Schrift.
16. Unterstrich mit Pseudo-Element
Für noch mehr Kontrolle kann ein Inline-Block mit ::after verwendet werden:
.highlight-custom {
position: relative;
display: inline-block;
color: #ff9933;
}
.highlight-custom::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 3px;
background: #3399cc;
}Damit kannst du Länge, Position, Höhe und später sogar Animationen vollständig selbst bestimmen.
17. Normale text-decoration oder Pseudo-Element?
Für einen klassischen farbigen Unterstrich ist text-decoration die bessere Wahl. Sie ist semantisch einfach, robust und passt sich dem Textfluss an.
Ein Pseudo-Element lohnt sich, wenn die Linie:
- nicht über die komplette Wortbreite laufen soll,
- besonders dick sein soll,
- animiert werden soll,
- einen Abstand besitzen soll, den die normale Dekoration nicht gut abbildet.
18. Mehrzeilige Hervorhebungen
Ein einzelnes Wort bleibt normalerweise einzeilig. Wenn du jedoch eine längere Wortgruppe markierst, die auf kleinen Displays umbrechen kann, ist text-decoration meist robuster als ein einzelnes absolut positioniertes Pseudo-Element.
Ein ::after unter einem mehrzeiligen Inline-Block kann sonst nur unter dem gesamten Block liegen und nicht automatisch jede Textzeile unterstreichen.
19. Auf Links achten
Wenn das farbig unterstrichene Wort kein Link ist, sollte das Design nicht exakt wie die normalen Links deiner Website aussehen. Sonst erwarten Besucher eine Klickfunktion.
Umgekehrt solltest du bei einem echten Link nicht durch CSS sämtliche typischen Linkhinweise entfernen, ohne einen anderen klaren Interaktionshinweis zu geben.
20. Farben müssen ausreichend Kontrast besitzen
Ein sehr helles Orange auf weißem Hintergrund kann schlecht lesbar sein. Die Unterstreichung in einer zweiten Farbe verbessert zwar die visuelle Hervorhebung, ersetzt aber keinen ausreichenden Kontrast des Wortes selbst.
Prüfe die endgültige Farbkombination auf dem tatsächlichen Seitenhintergrund.
21. Farbe nicht als einzige Bedeutung verwenden
Wenn das Wort nur dekorativ hervorgehoben wird, ist die Kombination aus Farbe und Unterstreichung gut. Soll die Hervorhebung dagegen eine inhaltliche Bedeutung vermitteln – zum Beispiel Fehler versus Erfolg – sollte diese Bedeutung zusätzlich durch Text oder ein anderes Merkmal verständlich sein.
22. Responsive Verhalten
Die normale Unterstreichung skaliert automatisch mit dem Text. Wenn du relative Werte verwendest, wächst die Gestaltung besonders harmonisch:
.highlight-text {
color: #ff9933;
text-decoration: underline solid #3399cc;
text-decoration-thickness: 0.12em;
text-underline-offset: 0.15em;
}Dadurch funktioniert dieselbe Klasse sowohl bei 18-Pixel-Fließtext als auch bei einer großen responsiven Überschrift.
23. Wenn der Unterstrich Buchstaben wie g oder p kreuzt
Browser können Unterstreichungen an Unterlängen vorbeiführen. Die Eigenschaft text-decoration-skip-ink steuert dieses Verhalten. Für normale Texte ist der Standard meist gut.
Wenn du eine durchgängige grafische Linie möchtest:
text-decoration-skip-ink: none;Das sollte gestalterisch bewusst entschieden werden.
24. Hover-Effekt nur bei echten Links
Bei einem Link könntest du die Unterstreichungsfarbe beim Hover wechseln:
a.highlight-text:hover {
text-decoration-color: #ff9933;
color: #3399cc;
}Bei einem nicht klickbaren Wort würde ein Hover-Farbwechsel dagegen unnötig Interaktivität suggerieren.
25. Klasse semantisch benennen
Wenn die Farben später geändert werden könnten, ist ein Name wie highlight-text oder accent-word besser als orange-word-blue-line.
Die Klasse beschreibt dann ihren Zweck und nicht die zufällige aktuelle Farbe.
26. Wiederverwendung in vielen Überschriften
Wenn dasselbe Design an mehreren Stellen vorkommt, ist die CSS-Klasse besonders praktisch. Ändert sich später die Markenfarbe, muss nur eine Definition angepasst werden.
Genau das ist der Vorteil gegenüber Inline-Styles wie:
<span style="color:red;text-decoration:underline">Wort</span>Solche direkten Styles sind bei vielen Stellen später mühsam zu ändern.
27. Robuste Standardversion
.highlight-text {
color: #ff9933;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: #3399cc;
text-decoration-thickness: 0.12em;
text-underline-offset: 0.15em;
}Im Text:
Das ist ein <span class="highlight-text">besonderes</span> Wort.Fazit
Ein einzelnes Wort in GeneratePress oder GenerateBlocks lässt sich am saubersten über einen Inline-span mit eigener CSS-Klasse gestalten. color steuert die Schrift, text-decoration-color die davon unabhängige Unterstrichfarbe, text-decoration-thickness die Stärke und text-underline-offset den Abstand. Für aufwendigere grafische Linien sind Gradient oder Pseudo-Element mögliche Alternativen – für den normalen farbigen Unterstrich ist die native Textdekoration jedoch die robusteste Lösung.
Aktuell geprüft
text-decoration-color, text-decoration-thickness und text-underline-offset sind etablierte CSS-Eigenschaften und werden von modernen Browsern breit unterstützt.