how to place text between horizontal line using HTML CSS?

How can i create line behind the title using CSS technique, something like this


something like Strikethrough but line passes over the text, so how to place it behind the text or we can say how to place text between horizontal line using HTML & CSS?

Asked by:- neena
: 393 At:- 8/17/2017 11:20:08 AM
CSS HTML text-between-horizontal-line

2 Answers
profileImage Answered by:- Vinnu

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


<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

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: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%;


<h1>Text here</h1>

Output would be:


At:- 8/17/2017 5:35:02 PM

profileImage Answered by:- vikas_jk

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

  1. Using Flexbox: Fiddle
  2. Using Table Cell and Gradient: Fiddle
  3. Using Span and Border: Fiddle
  4. Inline block heading with container: Fiddle


Hope this helps, thanks


At:- 8/18/2017 7:52:01 AM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use