Какие есть способы создания необычного подчёркивания в дизайне сайта?

Несколько способов создания необычного подчёркивания в дизайне сайта:

• Использование свойства text-decoration. www.internet-technologies.ru doka.guide Это простой способ подчёркивания, при котором применяется одно свойство. css-tricks.com Можно указать положение линии, её стиль и цвет. doka.guide Например, использовать сплошную, двойную, точечную, пунктирную или волнистую линию. doka.guide
• Применение свойства border-bottom. www.internet-technologies.ru Оно позволяет изменять цвет, толщину и стиль линии подчёркивания. www.internet-technologies.ru Подходит для однострочного текста. www.internet-technologies.ru
• Использование свойства text-shadow. www.internet-technologies.ru С его помощью можно скрыть часть линии подчёркивания, выступающей ниже базовой линии. www.internet-technologies.ru Подход работает только со сплошными цветами фона, но не с градиентной заливкой или изображениями. www.internet-technologies.ru
• Применение свойства box-shadow. css-tricks.com Оно рисует подчёркивание с помощью двух внутренних теней: одна создаёт прямоугольник, а вторая прячет его. webformyself.com Для правильной работы метода нужен однородный фон. webformyself.com
• Использование свойства background-image. www.internet-technologies.ru css-tricks.com С его помощью создают изображение, которое повторяется по горизонтали вдоль строк текста. www.internet-technologies.ru Можно использовать линейный градиент или добавить собственное изображение с эффектами. www.internet-technologies.ru css-tricks.com
• Применение SVG-фильтров. www.internet-technologies.ru Можно создать SVG-элемент filter, который рисует линию, а затем расширяет текст, чтобы скрыть прозрачные части линии. www.internet-technologies.ru
• Использование canvas. webformyself.com С помощью этой библиотеки можно создавать красивые, интерактивные подчёркивания, но для правильной работы придётся написать дополнительный JS-код. webformyself.com