Skip to content
Related Articles

Related Articles

How to make horizontal line with words in the middle using CSS?
  • Last Updated : 22 Apr, 2019

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :