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


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


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

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

Вот пример, на чистых псевдоэлементах
<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 лайк

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

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

Если на 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);
}