Understryk individuella ord - CSS-tricks

Anonim

Det finns ingen CSS för att använda en understrykning ( text-decoration: underline;) endast på enskilda ord i ett flervärdselement. Det bästa sättet skulle vara att slå in varje ord i ett intervall (inte mellanslag, bara orden) i spann och applicera understrykning på dessa spann. Här är jQuery för att göra det mot h1element.

$('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) + ''); ) ) )); ));

Då kan du göra:

h1 span ( text-decoration: underline; )

Liknande och lite mer robust lösning: Lettering.js