Open In App

How to Make Horizontal Line with Words in the Middle using CSS?

Last Updated : 01 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

CSS provides a simple and elegant way to create horizontal lines with text or images in the middle, which can be a great way to enhance the visual appeal of a webpage. This can be achieved using CSS properties like flexbox, ::before, and ::after pseudo-elements.

Syntax:

h4:before, h4:after {
    content: "";
    flex: 1;
    border-bottom: 2px solid #000;
    margin: auto;
}

Example 1: Horizontal Line with Words in the Middle

In this example, we will create a horizontal line with text (words) centered in the middle of the line.

html 
<!DOCTYPE html>
<html>
<head>
    <style>
        h4 {
            display: flex;
            flex-direction: row;
        }
        
        h4:before,
        h4:after {
            content: "";
            flex: 1 1;
            border-bottom: 2px solid #000;
            margin: auto;
        }
        
        img {
            height: 100px;
            width: 100px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <h4>GeeksforGeeks</h4>
</body>
</html>

Output :

Example 2: Horizontal Line with an Image in the Middle

In this example, we will create a horizontal line with an image centered in the middle of the line.

html 
<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            display: flex;
            flex-direction: row;
        }
        
        h1:before,
        h1:after {
            content: "";
            flex: 1 1;
            border-bottom: 2px solid #000;
            margin: auto;
        }
        
        img {
            height: 100px;
            width: 100px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <h1><img src=
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png">
  </h1>
</body>

</html>

Output:

Using ::before and ::after pseudo-elements along with flexbox, you can easily create horizontal lines with words or images centered in the middle. This technique can be used for headings, logos, or any other content that you want to highlight on the page.


Next Article
How to select elements by data attribute using CSS?

V
vaishalichauhan3003
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox