Підкресліть окремі слова - CSS-хитрощі

Anonim

Не існує CSS для застосування підкреслення ( text-decoration: underline;) лише до окремих слів у елементі, що складається з декількох слів. Найкращим способом було б обернути кожне слово в проміжок (не пробіли, а лише слова) у проміжки та застосувати підкреслення до цих проміжків. Ось jQuery, щоб зробити це з h1елементами.

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

Тоді ви могли зробити:

h1 span ( text-decoration: underline; )

Подібне і трохи більш надійне рішення: Lettering.js