5 способов создать вертикальную линию в HTML

Чтобы создать вертикальную линию в HTML, вы можете использовать различные методы. Вот несколько часто используемых подходов:

Метод 1. Использование свойства границы CSS

<style>
    .vertical-line {
        border-left: 1px solid black;
        height: 100px; /* Adjust the height as needed */
    }
</style>
<div class="vertical-line"></div>

Метод 2. Использование псевдоэлементов CSS

”;
дисплей: блок;
левая граница: 1 пиксель, сплошной черный;
высота: 100 пикселей; /* Отрегулируйте высоту по мере необходимости */

Метод 3. Использование градиента фона CSS

<style>
    .vertical-line {
        background: linear-gradient(to right, black, black 1px, transparent 1px, transparent);
        height: 100px; /* Adjust the height as needed */
    }
</style>
<div class="vertical-line"></div>

Метод 4. Использование таблицы HTML

<table>
    <tr>
        <td ></td>
        <td>Your content goes here</td>
    </tr>
</table>

Метод 5: использование SVG

<svg height="100" width="1">
    <line x1="0" y1="0" x2="0" y2="100" />
</svg>

Это всего лишь несколько примеров, могут быть и другие методы. Не забудьте настроить высоту, цвет и другие свойства в соответствии со своими требованиями.