ray13man13
@ray13man13
Начинающий frontend разработчик

Как сделать адаптивный псевдоэлемент с градиентом над текстом?

Как сделать линию с градиентом которая будет адаптивно менять свою ширину и располагаться над заголовком или блоком. 5d35b797e3837743682365.jpeg

Пытался сделать пслевдоэлементом, но не выходит сделать ещё адаптивно, только через заданные pading
.description .lineAboutUs:before{
  content: '';
  position: relative;
  top: -20px;
  z-index: 99999;
  font-size: 3px;
  padding: 0 180px 0 180px;
  background: -moz-linear-gradient( 0deg, rgb(112,151,209) 0%, rgb(38,62,102) 51%, rgb(255,255,255) 100%);
  background-image: -webkit-linear-gradient( 0deg, rgb(112,151,209) 0%, rgb(38,62,102) 51%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient( 0deg, rgb(112,151,209) 0%, rgb(38,62,102) 51%, rgb(255,255,255) 100%);
}

5d35b8fc8f4a7916316628.jpeg
Получается елемент который можно адаптировать только через медиа запросы, может есть более изящный способ?
Заранее спасибо
  • Вопрос задан
  • 43 просмотра
Решения вопроса 1
Jukk
@Jukk
.lineAboutUs:before{
  content: "";
  display: block;
  height: 4px;
  position: relative;
  top: -20px;
  background: -moz-linear-gradient( 0deg, rgb(112,151,209) 0%, rgb(38,62,102) 51%, rgb(255,255,255) 100%);
  background-image: -webkit-linear-gradient( 0deg, rgb(112,151,209) 0%, rgb(38,62,102) 51%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient( 0deg, rgb(112,151,209) 0%, rgb(38,62,102) 51%, rgb(255,255,255) 100%);
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Naive Москва
от 150 000 руб.
Эйлер Ульяновск
от 65 000 руб.
Biganto Visual Москва
от 120 000 до 150 000 руб.
23 авг. 2019, в 20:51
10000 руб./за проект
23 авг. 2019, в 20:03
1000 руб./за проект
23 авг. 2019, в 20:02
500 руб./за проект