Как добавить линию за текст в css?

Question

Как реализовать горизонтальную линию за текстом как на картинке?

Пробовал использовать свойство box-shadow - линия появляется ниже текста на несколько пикселей. Line-height не помогает т.к. меняется междустрочный интервал, а не отступ тени. Есть какое-нибудь свойство, которое указывает отступ box-shadow? Псевдоэлемент :after применяется ко всему тексту как к блоку, а не к строкам как на фото.

Как реализовать подобную линию? Заранее спасибо

Answer 1

вот так ?

p{
  font-size: 40px;
  font-weight: bold;
  position: relative;
}
p:before{
  content: '';
  position: absolute;
  top: 30px;
  left: 0px;
  display: inline-block;
  width: 290px;
  max-width: 290px;
  height: 5px;
  z-index: -1;
  background-color: orange;
}
p:after{
  content: '';
  position: absolute;
  top: 80px;
  left: 0px;
  display: inline-block;
  width: 190px;
  max-width: 190px;
  height: 5px;
  z-index: -1;
  background-color: orange;
}

<p>наши партнеры <br>по бизнесу</p>

Answer 2

h1 {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 48px;
  max-width: 400px;
}

h1 span {
  display: inline-block;
  position: relative;
}

h1 span::before {
  content: '';
  position: absolute;
  bottom: 20%; left: 0;
  width: 100%; height: 20%;
  background-color: orange;
  z-index: -1;
}

<h1>
  <span>Наши партнеры</span>
  <span>по бизнесу</span>
</h1>

Answer 3

Практически идентичный вопрос уже был: Как реализовать такое подчеркивание в CSS?

Я там в ответе предложил использовать фоновый градиент.

БЛОГ НА HUSL

Как добавить линию за текст в css?

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