Как создать несколько горизонтальных и вертикальных линий с помощью CSS?

Для создания нескольких горизонтальных и вертикальных линий с помощью CSS можно воспользоваться псевдоэлементами `::before` и `::after`. Например, чтобы создать горизонтальную линию, можно использовать следующий код:

```css
.divider {
  position: relative;
}

.divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000;
}
```

Для создания вертикальной линии можно использовать аналогичный подход, меняя свойства `left`, `width` и `height`.

Для улучшения контрастности и ясности вопроса можно использовать более ясные и конкретные термины, такие как "Как создать несколько горизонтальных и вертикальных линий на веб-странице с помощью CSS?" Кроме того, можно добавить дополнительную информацию о контексте использования или указать конкретные примеры линий, которые нужно создать.

Привет, вот приме ссыль 
 
<div class='row'>
  <div class="line line__horizontal"></div>
  <div class="line line__vertical line__vertical_left"></div>
  <div class="line line__vertical line__vertical_center"></div>
  <div class="line line__vertical line__vertical_right"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
 
 
 
body {
  background: radial-gradient(#22394d 10%,  #202a38);
  height: 100vh;
}

.row {
  display: flex;
  gap: 10px;
  position: relative;
  padding-top: 100px;
}

.line {
  border: solid 1px #304150;
  
  &__horizontal {
    position: absolute;
    top: 10%;
    left: 5%;
    right: 5%;
  }
  
  &__vertical {
    position: absolute;
    top: 10%;
    height: 20px;

    &_left {
      left: 5%;
    }
    &_center{
      top: 5%;
      left: 50%;
      height: 40px;
      transform: translateX(-50%)
    }
    &_right{
      right: 5%;
    }
  }
}

.box {
  display: block;
  width: 100%;
  height: 300px;
  background-color: #7092be;
}
 
 
 
и еще хотел момент один уточнить, не знаю как его оформить в виде полноценного вопроса, поэтому спрошу тут

в дизайне, визуально кажется что оранжевый блок, выходит за пределы синего и попадает на серый, скажите это просто так фон сделан через background: linear-gradient или это что-то другое, таких мест в макете может быть несколько, но при этом фон в макете чередуется в цветах постоянно, условно сначала серый фон, затем синий, потом снова серый и тд
 
 Это position  
 А так лучше Вам пройти базу на каком нибудь htmlacademy