Требуется подкладка под HTML/CSS

Question

Для научной цели нам нужно придать текст, похожий на подчеркивание, но он должен быть цветным и даже более важным: укладка. В принципе одно и то же слово может быть подчеркнуто красной прямой и с зеленой волнистой подчеркиванием в одно и то же время, например. В нашем старом редакторе для Windows у нас было до пяти уровней шести разных украшений, но теперь для браузера достаточно всего двух. Есть ли способ достичь этого?

Таким образом, нам нужны по крайней мере три различных стиля подчеркивания (например, прямая линия, пунктирная, волнистая, но это не имеет значения, это могут быть любые украшения), и каждая строка должна быть ее собственного цвета, а рисовать по крайней мере два под тем же словом.

Мы уже используем цвет текста, цвет фона и шрифт, так что это не вариант.

Answer 1

Это решение будет работать, если вы сможете использовать псевдоэлементы :before и :after.

Вы можете взять любой текст, который потребует подчеркивания и обернуть его в тег <span>. Затем вы можете нарисовать <span> и это :before и :after псевдо элементы.

Удостоверяются, что <span> элементов position настроено на relative. Это позволит вам позиционировать псевдо элементы относительно пролета, а не какой-либо элемент выше в DOM.

EDIT:

Любое слово/предложение вы хотели бы подчеркнуть, должны быть завернуты в <span></span> тег и учитывая класс подчеркиванием; Как и любой из классов стиля подчеркивания (.info, .alert, .warning).

мы можем обновить фрагмент кода ниже от:

<span class="alert info warning underline">dolor sit amet,consectetur adipisicing elit.</span> 

к:

<span class="alert info underline">dolor sit amet, <span class="warning underline">consectetur</span> adipisicing elit.</span> 

Как вы можете видеть, что мы обернуть слово consectetur в <span class="underline warning"></span> позволяет ему наследовать родительский охватывает .info и .alert подчеркивание все при добавлении собственного .warning подчеркнуть микс.

p{ 
 
    line-height: 1.5em; 
 
} 
 
.underline{ 
 
    position: relative; 
 
} 
 
.alert:before{ 
 
    position: absolute; 
 
    content: ""; 
 
    border-bottom: solid 1px red; 
 
    width: 100%; 
 
    height: 102%; 
 
    left: 0; 
 
} 
 
.info:after{ 
 
    position: absolute; 
 
    content: ""; 
 
    border-bottom: dashed 1px blue; 
 
    width: 100%; 
 
    height: 135%; 
 
    left: 0; 
 
} 
 
.warning{ 
 
    border-bottom: dotted 1px green; 
 
}

<p>Lorem ipsum <span class="alert info underline">dolor sit amet, <span class="warning underline">consectetur</span> adipisicing elit.</span> Eveniet fugit ducimus debitis eos quos maxime labore voluptatem qui iusto consequuntur quod mollitia deleniti quia possimus dicta nihil autem blanditiis quidem!</p>