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

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



filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output :

Example-2: To make a horizontal line with the image in middle

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.