горизонтальная линия

Общее
1

%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA
Снимок.PNG981×220 2.39 KB

Каким способом добиваются таких линий как на фото?
Пытался

стилизовать, но все равно немного не то выходит,ну либо я плохо делал.
Подскажите пожалуйста
2

Псевдоэлементом с соответствующим фоновым изображением. А потом его просто позиционируют так как надо.
Или на чистых псевдоэлементах, но это не совсем то.

Вот пример, на чистых псевдоэлементах 
<div class="container">
  <input type="text" placeholder="Your email">
  <div class="line">
    <div class="line__block"></div>
  </div>
</div>

* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }
  
.container {
  width: 700px;
  height: 200px;
  margin: 0 auto;
}
input {
  display: block;
  width: 100%;
  padding: 20px 30px;
  font-size: 30px;
  color: rgba(170, 170, 170, 1);
  border-radius: 100px;
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(170, 170, 170, 0.3);
}
.line {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.line::before,
.line::after {
  content: '';
  width: 0;
  height: 0;
  border: 260px solid rgba(170, 170, 170, 0.2);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}
.line::before { border-left: none; }
.line::after { border-right: none; }
.line__block {
  width: 20%;
  height: 6px;
  background-color: rgba(170, 170, 170, 0.2);
}
1 лайк
3

Думал, что понял ваш код, но оказалось нет(
Пытался на его основе сделать просто горизонтальную линию, которая при наведении меняет цвет, ничего не выходит.
Не понимаю написание этих линий

4

При наведении на что?

Если на input, то:

input:hover + .line::before {
  border-right-color: rgba(170, 170, 170, 0.5);
}
input:hover + .line::after {
  border-left-color: rgba(170, 170, 170, 0.5);
}
input:hover + .line .line__block {
  background-color: rgba(170, 170, 170, 0.5);
}