Как создать несколько горизонтальных и вертикальных линий с помощью 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?" Кроме того, можно добавить дополнительную информацию о контексте использования или указать конкретные примеры линий, которые нужно создать.

Привет, вот приме <a href="https://codepen.io/oscarhandsome/pen/PogzyXM" rel="nofollow">ссыль</a> <br/> <pre><code class="html">&lt;div class='row'&gt;
  &lt;div class="line line__horizontal"&gt;&lt;/div&gt;
  &lt;div class="line line__vertical line__vertical_left"&gt;&lt;/div&gt;
  &lt;div class="line line__vertical line__vertical_center"&gt;&lt;/div&gt;
  &lt;div class="line line__vertical line__vertical_right"&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre> <br/> <br/> <pre><code class="css">body {
  background: radial-gradient(#22394d 10%,  #202a38);
  height: 100vh;
}

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

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

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

.box {
  display: block;
  width: 100%;
  height: 300px;
  background-color: #7092be;
}</code></pre> <br/> <br/> <blockquote>и еще хотел момент один уточнить, не знаю как его оформить в виде полноценного вопроса, поэтому спрошу тут<br/>
в дизайне, визуально кажется что оранжевый блок, выходит за пределы синего и попадает на серый, скажите это просто так фон сделан через background: linear-gradient или это что-то другое, таких мест в макете может быть несколько, но при этом фон в макете чередуется в цветах постоянно, условно сначала серый фон, затем синий, потом снова серый и тд</blockquote> <br/> Это <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position" rel="nofollow">position </a> <br/> А так лучше Вам пройти базу на каком нибудь htmlacademy