Sublinhar palavras individuais - CSS-Tricks

Índice

Não há CSS para aplicar um sublinhado ( text-decoration: underline;) apenas a palavras individuais em um elemento de várias palavras. A melhor maneira seria envolver cada palavra em um intervalo (não os espaços, apenas as palavras) em intervalos e aplicar sublinhado a esses intervalos. Aqui está o jQuery para fazer isso com os h1elementos.

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

Então você poderia fazer:

h1 span ( text-decoration: underline; )

Solução semelhante e um pouco mais robusta: Lettering.js

Artigos interessantes...