Sottolineare singole parole

La regola css text-decoration: underline; non permette la sottolineatura delle singole parole ma applica il sottolinetao anche agli spazi compresi nel testo, e non esiste alternativa CSS per farlo.

Come spesso accade ci viene in aiuto la libreria Jqury per ovviare alla bisogna !

Nell'esempio utilizziamo un tag H6 a cui far apllicare automaticamente la sottolineatura per singola parola.

Dopo aver fatto la classica chiamata alla libreria Jquery più aggiornata, come descritto in questo articolo, definiamo la function al document ready

$('h6').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] + '');
			}
		}
	
	});

});

infine nel nostro CSS ricordiamoci di inserire la regola

h1 span {
  text-decoration: underline;
}