how to place text between horizontal line using HTML CSS?

There are many methods to place centered text and horizontal lines on either side of it using html-css

First:

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: #F3F5F6; padding: 0 5px;">
    Your Text Here
  </span>
</div>

In the above HTML and inline CSS, let's take a look at first div, CSS height property will place the border-line 20px away from top and text aligned as centered, with second div inline style you will get we are creating a centered text with a background to cover up the line and show text

Second Method(Only CSS):

With the help of pseudo Elements we can place <h1> or any other text in center of two horizontal lines

h1 {
    overflow: hidden;
    text-align: center;
}
h1:before,
h1:after {
    background-color: #000;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}
h1:before {
    right: 0.5em;
    margin-left: -50%;
}
h1:after {
    left: 0.5em;
    margin-right: -50%;
}

HTML

<h1>Text here</h1>

Output would be:

Check this link it may help to place line behind title using CSS

1. Using Flexbox: Fiddle
   

   h1 {
     text-align: center;
     display: flex;
     flex-direction: row;
     justify-content: center;
    }
   
   h1:before, 
   h1:after {
     flex-grow: 1;
     height: 1px;
     content: '\a0';
     background-color: #ddd;
     position: relative;
     top: 0.5em;
   }
   
   h1:before {
     margin-right:10px;
   }
   
   h1:after {
     margin-left:10px;
   }

   HTML

   <h1>Title</h1>?

2. Using Table Cell and Gradient: Fiddle
3. Using Span and Border: Fiddle
   CSS
   

   h1 {
       text-align: center;
       border-bottom: 1px solid #ddd;
       line-height: 0;
       padding: 0;
   }
   
   h1 span {
       background: #fff;
       padding: 0 15px;
   }?

   HTML

   <h1><span>Title</span></h1>?

4. Inline block heading with container: Fiddle
5. Shortest one: Fiddle
   

   span:after,
   span:before{
       content:"\00a0\00a0\00a0\00a0\00a0";
       text-decoration:line-through;
   }?

   HTML
   

   <span>Your text here</span>?

Hope this helps, thanks