Стилизированное выделение текста

Question

Нужно сделать подчеркивание текста (на фото пример из макета одного из подчеркиваний):

Изначально делала через псевдоэлементы, но возникает проблема при адаптиве, так как жёлтая линия (псевдоэлемент на абсолюте) не прерывается на 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>

Подскажите, пожалуйста, рабочий вариант.

Answer 1

Если нужно адаптивное решение, то без "костылей" тут не обойтись... Причём весьма солидных. Не пугает? Тогда смотрим способ ниже:

Делаем <h3> относительным и с высотой по контенту. Также он должен обрезать всё, что выходит за его границы, но при этом, иметь отступ со стороны, где будет выступать подчёркивание.
Добавляем в разметку (сразу за <span>-ом с основным текстом) блочную обёртку, чтобы можно было абсолютно её позиционировать.
В обёртку копируем в точности весь основной текст вместе с тегом, меняем только класс.

"Костыли":

Вмешательство в разметку, но "красота требует жертв".
Необходимость продумать, чтобы дополнительное содержимое подставлялось, либо при формировании страницы на сервере, либо на клиенте скриптом).

/* Only for demo --> */ body{margin:0;height:100vh;background-color:rgba(255,255,255,1);background-image:url(https://i.stack.imgur.com/m9NKc.png),url(https://i.stack.imgur.com/m9kuJ.jpg);background-position:0% 0%,center;background-repeat:no-repeat;background-size:auto;display:flex;justify-content:space-around;align-items:center}

.gifts__title_small {
  position: relative;
  max-height: min-content;
  padding: 0 1em 0 0;
  overflow: hidden;
  font: 16px/2em "Arial Black";
  /* Only for demo */
  box-shadow: inset 0 0 3px 1px #0ff;
  resize: both;
}
.gifts__title_small > div {
  position: absolute;
  top: 0px; bottom: 0px;
  left: 0px; right: 0px;
  z-index: -1;
  padding: 0 1em 0 0;
}
.gifts__title_small > div > span {
  position: relative;
  left: -100vw;
  border-radius: 50px;
  box-shadow: calc(1em + 100vw) 0.4em 0 -0.4em rgb(255 255 0 / 50%);
  -o-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<h3 class="gifts__title_small">
  <span>«Костыль»<br>Работоспособность костыля можно проверить, изменив размер этого контейнера, ухватив его за правый нижний угол.</span>
  <div>
    <span>«Костыль»<br>Работоспособность костыля можно проверить, изменив размер этого контейнера, ухватив его за правый нижний угол.</span>
  </div>
</h3>

Сразу не рассмотрел, что в вопросе допускается JavaScript, поэтому дополню вариантом с автоматическим добавлением нужной разметки:

document.addEventListener('DOMContentLoaded', fAccentuation);

function fAccentuation() {
  document.querySelectorAll('h3.gifts__title_small > span').forEach(function(el) {
    el.insertAdjacentHTML('afterend', `<div>${el.outerHTML}</div>`);
  })
}

/* Only for demo --> */ body{margin:0;height:100vh;background-color:rgba(255,255,255,1);background-image:url(https://i.stack.imgur.com/m9NKc.png),url(https://i.stack.imgur.com/m9kuJ.jpg);background-position:0% 0%,center;background-repeat:no-repeat;background-size:auto;display:flex;flex-flow:column;justify-content:space-around;align-items:center}

.gifts__title_small {
  position: relative;
  max-height: min-content;
  padding: 0 1em 0 0;
  overflow: hidden;
  font: 16px/2em "Arial Black";
  /* Only for demo */
  box-shadow: inset 0 0 3px 1px #0ff;
  resize: both;
}
.gifts__title_small > div {
  position: absolute;
  top: 0px; bottom: 0px;
  left: 0px; right: 0px;
  z-index: -1;
  padding: 0 1em 0 0;
}
.gifts__title_small > div > span {
  position: relative;
  left: -100vw;
  border-radius: 50px;
  box-shadow: calc(1em + 100vw) 0.4em 0 -0.4em rgb(255 255 0 / 50%);
  -o-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<h3 class="gifts__title_small">
  <span>Функцию запустится, при загрузке дерева DOM, и добавит необходимую разметку всем элементам подходящим под указанный селектор. Стили применятся автоматически.</span>
</h3>

<h3 class="gifts__title_small">
  <span>Таким образом, формировать страницу можно как обычно.</span>
</h3>

БЛОГ НА HUSL

Стилизированное выделение текста

Ответы (1 шт):