Subrayar palabras individuales - Trucos CSS

Anonim

No hay CSS para aplicar un subrayado ( text-decoration: underline;) solo a palabras individuales en un elemento de varias palabras. La mejor manera sería envolver cada palabra en un intervalo (no los espacios, solo las palabras) en intervalos y aplicar subrayado a esos intervalos. Aquí está jQuery para hacer eso con los 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) + ''); ) ) )); ));

Entonces podrías hacer:

h1 span ( text-decoration: underline; )

Solución similar y un poco más robusta: Lettering.js