Как проще всего реализовать сдвинутое по осям подчеркивание для заголовка?

Question

[Полина Емельянова]

Добрый день, коллеги,
Прошу, подскажите, как бы вы реализовали подобное подчеркивание у текста:


Есть идея с градиентами и тенью. Не устраивает громоздким кодом. Должно же быть более простое решение.

Песочница на поиграть


Заранее благодарю за помощь и идеи.

Comments

[Геноцид Блинчиков]

Позишин absolute форсит элемент быть display: block, так что указание inline-block не имеет смысла.

Не устраивает громоздким кодом

Вы перегибаете палку.

Answer 1

[Полина Емельянова]

Коллеги, БЛАГОДАРЮ ВАС за идеи.

Скомпилировала ваши предложения вот так.
Результат... Терпимый. Близко к оригиналу.

Answer 2

[v3shin]

<h1 class="hero__title">
  <span class="shadow">Дизайн и верстка</span>
  <span class="shadow">сайтов с нуля</span>
  <span class="shadow">для вас</span>
</h1>

.hero__title {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.shadow {
  position: relative;
}
.shadow:after {
  background: #000;
  content: '';
  position: absolute;
  top: 10px;
  left: -10px;
  width: 100%;
  height: 100%;
  z-index: -1;
}

Answer 3

[Danny Arty]

Не адаптивно и с подгоном, но примерно можно так

Answer 4

[Сергей]

Вот, адаптивно. Зависит от размера шрифта. Здесь не подчёркивание, а бэкграунд, задаём через псевдо элементы и сдвигаем через абсолютное позиционирование. Ещё можно сделать через transform:

Comments

[Полина Емельянова]

Что-то пошло не так на малом экране.)))

Я найду решение и напишу.

[Сергей]

Полина Емельянова, Это потому что текст переносится на новую строку. Просто уменьшите размер шрифта для определённой ширины экрана. Что бы фраза всегда влазила целиком. Или использовать для span.hero__desc свойство display: inline-block и удалить теги BR. Но всё равно будет не совсем то при переносе текста. Вообще не вижу смысла переноса данной фразы. Она спокойно уместиться даже при 300 пикселях по ширине. Просто уменьшите размер шрифта на мобильных

[Сергей]

Полина Емельянова, переделал немного код. Теперь текст становится меньше и прекрасно влезает. Размеры ширины и стили уже подберите сами.