how to place text between horizontal line using HTML CSS?


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

------Text-----

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
2
: 131 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

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:

Centered-text-between-horizontal-lines-using-CSS

2
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

Source

Hope this helps, thanks

 

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





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

Full Name *

Email *




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