Подчеркивания для слов

Делаю сайт по русской грамматике, нужно как то реализовать подчеркивание членов предложения разными линиями, чтобы они при этом были адаптивны и прикреплены к словам, которые подчеркиваются. Пробовал просто png с линиями подставлять, но получается очень непропорцинольно на больших экранах и нет привязки подчеркиваний к слову. Есть идеи, как это можно реализовать? Сайт на Тильде. На картинке вариант, который должен получиться в идеале

Привет, надеюсь ты ещё живой.
Я бы предложил использовать псевдоелементы. Сделай классы по типу 'underline-wave', 'underline-solid', 'underline-double', вешай на слова, и через псевдоелемент конерктного класса позиционируй.

Hi, in this video Pure CSS Menu Hover Animation - HTML CSS Menu hover
you will learn how to create a nice looking navigation for your website.