Einzelne Wörter unterstreichen - CSS-Tricks

Anonim

Es gibt kein CSS zum Anwenden einer Unterstreichung ( text-decoration: underline;) nur auf einzelne Wörter in einem Element mit mehreren Wörtern. Der beste Weg wäre, jedes Wort in einen Bereich (nicht die Leerzeichen, nur die Wörter) in Bereiche einzubinden und diese Bereiche zu unterstreichen. Hier ist jQuery, um dies mit h1Elementen zu tun .

$('h1').each(function() ( var words = $(this).text().split(' '); $(this).empty().html(function() ( for (i = 0; i < words.length; i++) ( if (i == 0) ( $(this).append('' + words(i) + ''); ) else ( $(this).append(' ' + words(i) + ''); ) ) )); ));

Dann könnten Sie tun:

h1 span ( text-decoration: underline; )

Ähnliche und etwas robustere Lösung: Lettering.js