0

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

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

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

1
  • можно использовать <hr>
    – kertAW
    15 июл 2020 в 19:56

3 ответа 3

5

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>

2
  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>

1

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

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.