Как создать несколько перекрывающихся подчеркиваний в разных подразделах текста

Я хочу создать функцию, в которой пользователи могут аннотировать разные подразделы текста. Когда аннотация сделана, под этой частью текста будет отображаться подчеркивание. Как я могу создать этот эффект с помощью HTML/CSS?

Эффект подчеркивания


html css underline
person Peter R    schedule 28.04.2015    source источник
comment
Посмотрите здесь для другого ответа: stackoverflow.com/questions/40861062/   -  person friedemann_bach    schedule 30.11.2016

Ответы (2)


arrow_upward
5
arrow_downward

Вы можете добиться такого эффекта подчеркивания с помощью линейных градиентов:

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>

Обратите внимание, что я не вставил префиксы поставщиков для линейного градиента

person web-tiki    schedule 28.04.2015
comment
просто и эффективно! - person vals; 28.04.2015
comment
@web-tiki Спасибо. Как я могу сделать что-то вроде двух верхних строк, которые перекрывают Tempor в моем примере? - person Peter R; 28.04.2015
comment
@PeterR Я отредактировал ответ с примером перекрывающейся строки. - person web-tiki; 29.04.2015
comment
Хорошо выглядит в Firefox. В Chrome есть небольшой промежуток между подчеркиванием .two слов finibus и aliquam. - person Carl G; 06.10.2018

arrow_upward
0
arrow_downward

Вы не можете сделать это напрямую с помощью HTML и CSS.

Вы можете сделать это в современном браузере, написав собственный код и создав собственное решение Canvas/SVG. Но это очень сложная работа. Попробуйте поискать какую-нибудь графическую библиотеку, которая поможет вам в этом.

person JotaBe    schedule 28.04.2015