Как сверстать несколько линий(вертикальных и горизонтальных в css)?

Чтобы сверстать несколько вертикальных и горизонтальных линий при помощи CSS, можно использовать псевдоэлементы :before и :after. Вот примеры кода для создания таких линий:

1. Вертикальная линия:

HTML:

<div class="vertical-line"></div>

CSS:

.vertical-line {
    position: relative;
}

.vertical-line:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px; /* Ширина линии */
    height: 100%; /* Высота линии */
    background-color: black; /* Цвет линии */
    transform: translateX(-50%);
}

2. Горизонтальная линия:

HTML:

<div class="horizontal-line"></div>

CSS:

.horizontal-line {
    position: relative;
    border-top: 2px solid black; /* Высота и цвет линии */
}

Таким образом, применяя этот подход, вы сможете создавать вертикальные и горизонтальные линии в своем веб-дизайне при помощи CSS.