Subrayar palabras individuales | Programar Plus

No hay CSS para aplicar un subrayado (text-decoration: underline;) solo para 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 h1 elementos.

$('h1').each(function() {

	var words = $(this).text().split(' ');

	$(this).empty().html(function() {

		for (i = 0; i < words.length; i++) {
			if (i == 0) {
				$(this).append('<span>' + words[i] + '</span>');
			} else {
				$(this).append(' <span>' + words[i] + '</span>');
			}
		}
	
	});

});

Entonces podrías hacer:

h1 span {
  text-decoration: underline;
}

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

(Visited 2 times, 1 visits today)