How to create multiple overlapping underlines under different subsections of text

Question

I want to create a feature where users can annotate different subsections of a text. When an annotation has been made an underline will show under that part of the text. How could I create this effect with HTML/CSS?

Underlining effect

Look here for another answer: http://stackoverflow.com/questions/40861062/text-with-multiple-underlines — friedemann_bach, Nov 30 '16 at 08:17

web-tiki · Answer 1 · 2015-04-29T08:41:10.367

5

You can achieve this kind of underlining effect with linear gradients :

span {
    line-height: 20px;
    background: linear-gradient(0deg, green 1px, white 1px, transparent 1px);
    background-position: 0 100%;
}
.two {
    line-height: 24px;
    padding-bottom: 4px;
}
.three {
    line-height: 28px;
    padding-bottom: 8px;
}

<p><span class="one">Lorem ipsum <span class="two">dolor</span> sit amet,</span>consectetur adipiscing elit. <span class="one">Maecenas <span class="two"><span class="three">finibus</span></span></span><span class="two"> aliquam eros eget accumsan.Pellentesque quis <span class="three">diam lacus.</span></span></p>

Note that I didn't insert the vendor prefixes for the linear gradient

edited Apr 29 '15 at 08:41

answered Apr 28 '15 at 10:03

web-tiki

99,765
32
217
249

simple and efective ! – vals Apr 28 '15 at 16:10
@web-tiki Thanks. How can I do something like the top two lines that overlap "Tempor" in my example? – Peter R Apr 28 '15 at 18:51
@PeterR I edited the answer with an overlapping line example. – web-tiki Apr 29 '15 at 08:42
Looks good on Firefox. On Chrome there is a sliiight gap between the `.two` underlines of "finibus" and "aliquam". – Carl G Oct 06 '18 at 15:05

score 0 · Answer 2 · edited Dec 01 '16 at 13:16

0

You cannot do that directly with HTML and CSS.

You can do that in a modern browser writing custom code and creating a custom Canvas/SVG solution. But that's a very hard to do work. Try looking for some graphics library that can help you do it.

edited Dec 01 '16 at 13:16

Nisse Engström

4,738
23
27
42

answered Apr 28 '15 at 09:15

JotaBe

38,030
8
98
117

How to create multiple overlapping underlines under different subsections of text

2 Answers2