Understrege individuelle ord - CSS-tricks

Anonim

Der er ingen CSS til kun at anvende en understregning ( text-decoration: underline;) på individuelle ord i et element med flere ord. Den bedste måde ville være at pakke hvert ord i et spændvidde (ikke mellemrumene, kun ordene) i spændvidde og anvende understregning på disse spændvidder. Her er jQuery for at gøre det mod h1elementer.

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

Så kunne du gøre:

h1 span ( text-decoration: underline; )

Lignende og lidt mere robust løsning: Lettering.js