Open In App
Related Articles

How to make horizontal line with words in the middle using CSS?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report
CSS provides the feature of making a horizontal line including words or image in the middle of the webpage to make it attractive. This can be achieved by using simple CSS properties. Syntax:
h4:before, h4:after {
     content: "";
     flex: 1 1;
     border-bottom: 2px solid #000;
     margin: auto;
}
Example-1: To make a horizontal line with words in middle
<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: To make a horizontal line with the image in middle
<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=
  </h1>
</body>
  
</html>

                    
Output:

Last Updated : 22 Apr, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads