How to make a vertical line in HTML

Learn how to make a vertical line in html with practical examples, diagrams, and best practices. Covers html, css development techniques with visual explanations.
Tags:
Categories:

Creating Vertical Lines in HTML and CSS

Hero image for How to make a vertical line in HTML

Learn various techniques to add vertical lines to your web pages using HTML and CSS, from simple borders to flexible dividers.

Vertical lines are a common design element used to separate content, create visual hierarchy, or simply add aesthetic appeal to a web page. While HTML doesn't have a dedicated <vline> tag like <hr> for horizontal rules, CSS provides several powerful ways to achieve this effect. This article will explore the most effective and widely used methods, complete with code examples and explanations.

Method 1: Using CSS Borders

The simplest and most common way to create a vertical line is by applying a left or right border to an HTML element. This method is highly flexible as you can control the line's color, thickness, and style. You can apply it to any block-level element like a <div>, <span> (when displayed as block or inline-block), or even a semantic element like <aside>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Line with Border</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            border: 1px solid #ccc;
            margin: 20px;
        }
        .content-left {
            padding: 20px;
            background-color: #f0f0f0;
        }
        .vertical-line-border {
            border-left: 2px solid #333;
            height: 100%; /* Takes full height of parent */
            margin: 0 20px; /* Spacing around the line */
        }
        .content-right {
            padding: 20px;
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content-left">
            <p>Content on the left.</p>
        </div>
        <div class="vertical-line-border"></div>
        <div class="content-right">
            <p>Content on the right.</p>
        </div>
    </div>
</body>
</html>

HTML and CSS for a vertical line using a border

Method 2: Using Pseudo-elements (::before or ::after)

Pseudo-elements offer a powerful way to insert content (including vertical lines) without adding extra markup to your HTML. This is particularly useful for decorative lines or when you want to attach a line to an existing element without affecting its box model directly. You can position these pseudo-elements absolutely or relatively to their parent.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Line with Pseudo-element</title>
    <style>
        .section-with-line {
            position: relative; /* Needed for absolute positioning of pseudo-element */
            padding: 20px 40px;
            margin: 20px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
        .section-with-line::before {
            content: '';
            position: absolute;
            left: 20px; /* Adjust position as needed */
            top: 0;
            bottom: 0;
            width: 2px; /* Thickness of the line */
            background-color: #007bff; /* Color of the line */
        }
    </style>
</head>
<body>
    <div class="section-with-line">
        <h2>Section Title</h2>
        <p>This content is visually separated by a vertical line created using a CSS pseudo-element. It's a clean way to add decorative elements without extra HTML.</p>
    </div>
</body>
</html>

HTML and CSS for a vertical line using a pseudo-element

flowchart TD
    A[HTML Element] --> B{"Has `position: relative;`?"}
    B -- Yes --> C[Pseudo-element `::before` or `::after`]
    C --> D{"Set `position: absolute;`"}
    D --> E{"Define `content: '';`"}
    E --> F{"Set `width`, `height`, `background-color`"}
    F --> G{"Adjust `top`, `bottom`, `left`, `right` for positioning"}
    B -- No --> H[Pseudo-element will position relative to nearest positioned ancestor or body]
    H --> F

Decision flow for creating vertical lines with pseudo-elements

Method 3: Using Flexbox or Grid Gaps/Borders

When working with layouts, Flexbox and CSS Grid provide elegant solutions for creating vertical dividers, especially between columns. You can leverage the gap property or apply borders directly to the flex/grid items.

Flexbox Example

Vertical Line with Flexbox

Column One

This is the content for the first column.

Column Two

This is the content for the second column, separated by a vertical line.

Column Three

And here is the third column's content.

CSS Grid Example

Vertical Line with CSS Grid

Grid Column A

Content for the first grid column.

Grid Column B

Content for the second grid column, separated by a dedicated line element.

Choosing the Right Method

The best method depends on your specific use case:

  • CSS Borders: Ideal for simple separations, especially when you want the line to be part of an existing element's visual style (e.g., a sidebar with a left border).
  • Pseudo-elements: Excellent for decorative lines that don't add extra HTML markup, perfect for subtle visual cues or complex designs where the line is not a structural element.
  • Flexbox/Grid: Best for layout-driven separations, particularly between columns of content. Grid offers the most control for dedicated line columns, while Flexbox borders are good for consistent spacing between items.

By understanding these techniques, you can effectively implement vertical lines in your web designs, enhancing readability and visual organization without relying on outdated or non-semantic HTML practices.