Individuele woorden onderstrepen - CSS-trucs

Anonim

Er is geen CSS om een ​​onderstreping ( text-decoration: underline;) alleen toe te passen op individuele woorden in een element met meerdere woorden. De beste manier is om elk woord in een span (niet de spaties, alleen de woorden) in reeksen te plaatsen en onderstreping toe te passen op die reeksen. Hier is jQuery om dat met h1elementen te doen .

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

Dan zou je kunnen doen:

h1 span ( text-decoration: underline; )

Vergelijkbare en iets robuustere oplossing: Lettering.js