Нужно сделать подчеркивание текста (на фото пример из макета одного из подчеркиваний):
Изначально делала через псевдоэлементы, но возникает проблема при адаптиве, так как жёлтая линия (псевдоэлемент на абсолюте) не прерывается на 2-3 строки.
Пробую вариант с тегом <mark>
, но не выходит стилизовать как надо:
.yellow {
background: url('../img/highlight.png') right bottom;
/* background: linear-gradient(to bottom, rgba(255,242,122,0) 40%, rgba(255,242,122,1) 40%) right bottom;*/
background-repeat: repeat-x;
width: 100%;
padding: 0;
border-radius: 50px;
display: inline;
line-height: 20px;
-moz-box-decoration-break: clone;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<h3 class="gifts__title_small">
<mark class="yellow">Брошюра</mark><br><mark class="yellow">«Бьюти тренер.14 источников дохода»</mark>
</h3>
Подскажите, пожалуйста, рабочий вариант.