Souligner les mots individuels - Astuces CSS

Anonim

Il n'y a pas de CSS pour appliquer un soulignement ( text-decoration: underline;) uniquement à des mots individuels dans un élément à plusieurs mots. La meilleure façon serait d'envelopper chaque mot dans une plage (pas les espaces, juste les mots) dans des plages et d'appliquer un soulignement à ces plages. Voici jQuery pour faire cela aux h1éléments.

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

Ensuite, vous pouvez faire:

h1 span ( text-decoration: underline; )

Solution similaire et légèrement plus robuste: Lettering.js