How to Create a Vertical Line with CSS

Introduction

A vertical line can be a useful design element to visually separate content on a webpage. While HTML doesn't have a built-in tag for vertical lines, you can easily create them using CSS. In this guide, you'll learn how to create a simple vertical line using CSS.

Development Steps

Use the div Element for the Line: We'll use a div element and style it to look like a vertical line.
Style the Line with CSS: Use CSS properties such as height, width, border, or background to create the vertical line.
Position the Line as Needed: You can adjust the position of the vertical line depending on your layout.

Step 1: Basic HTML Structure

We’ll start with a simple HTML structure that includes a div element, which we will style as a vertical line.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Line Example</title>
</head>
<body>

    <!-- Step 1: Div for the vertical line -->
    <div class="vertical-line"></div>

</body>
</html>

Explanation:

The div element with the class .vertical-line will be styled to appear as a vertical line using CSS.

Step 2: Style the Vertical Line with CSS

We’ll now style the div element to make it appear as a vertical line by giving it a fixed height, a small width, and a background or border.

<head>
    <style>
        /* Step 2: Style for the vertical line */
        .vertical-line {
            width: 2px;            /* Set the width to make it narrow */
            height: 200px;          /* Height of the vertical line */
            background-color: black; /* Color of the line */
            margin: 20px;           /* Optional: Add some margin */
        }
    </style>
</head>

Explanation:

width: 2px: The line's width is set to 2 pixels to make it narrow.
height: 200px: The height is set to 200 pixels, making the line long and vertical.
background-color: black: The background color is set to black to give the line its color.

Step 3: Add the Line Between Content (Optional)

You can also use this vertical line to separate two pieces of content by adding it between two elements.

<body>
    <div class="container">
        <p>This is the content on the left side.</p>
        <div class="vertical-line"></div>
        <p>This is the content on the right side.</p>
    </div>
</body>

You can use display: flex on the .container to align the text and the vertical line next to each other.

<head>
    <style>
        .container {
            display: flex;
            align-items: center; /* Aligns the content and line vertically */
        }

        .vertical-line {
            width: 2px;
            height: 100px;
            background-color: black;
            margin: 0 20px; /* Space around the vertical line */
        }

        p {
            margin: 0;
        }
    </style>
</head>

Explanation:

Flexbox Layout: By using display: flex, we align the text and the vertical line side by side. This is useful for separating content visually.
align-items: center: This vertically centers the text and the vertical line.

Complete Example

Here’s the complete HTML and CSS code to create a vertical line and place it between two paragraphs of text:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Line Example</title>
    <style>
        /* Container to hold content and vertical line */
        .container {
            display: flex;
            align-items: center; /* Aligns the content and line vertically */
        }

        /* Style for the vertical line */
        .vertical-line {
            width: 2px;
            height: 100px;
            background-color: black;
            margin: 0 20px; /* Space around the vertical line */
        }

        /* Optional: Style for the paragraphs */
        p {
            margin: 0;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>

    <!-- Step 3: Content with a vertical line separator -->
    <div class="container">
        <p>This is the content on the left side.</p>
        <div class="vertical-line"></div>
        <p>This is the content on the right side.</p>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this guide, you learned how to create a vertical line using HTML and CSS. By adjusting the width, height, and background-color properties, you can style the vertical line as needed. Additionally, you can position it between content using Flexbox, making it a useful design element for separating sections of content on your web page.

Java Guides

Search This Blog