Subliniați cuvintele individuale - CSS-Tricks

Anonim

Nu există CSS pentru aplicarea unui subliniat ( text-decoration: underline;) numai cuvintelor individuale dintr-un element cu mai multe cuvinte. Cel mai bun mod ar fi să înfășurați fiecare cuvânt într-un interval (nu spațiile, doar cuvintele) în întinderi și să aplicați subliniat acelor întinderi. Iată jQuery pentru a face asta h1elementelor.

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

Atunci ai putea face:

h1 span ( text-decoration: underline; )

Soluție similară și puțin mai robustă: Lettering.js