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

Question

Anyone have an idea how to make horizontal lines with words in the middle using CSS?

The design looks like this below:

---------------- Title ------------------

like in the middle or vertically middle but on the right and left of the text? — imbondbaby, Jun 26 '14 at 04:43
possible duplicate of [css technique for a horizontal line with words in the middle](http://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle) — omma2289, Jun 26 '14 at 04:46
[This tutorial](http://css-tricks.com/line-on-sides-headers/) might also be useful — omma2289, Jun 26 '14 at 04:48

score 2 · Accepted Answer · edited May 23 '17 at 12:20

If I understand your question correctly <strike> tag could be used.

The <strike> tag is not supported in HTML5. For HTML5 use <del> tag instead.

If you meant horizontal lines with words in the middle... Try this:

HTML:

<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

CSS:

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

JSFiddle:

http://jsfiddle.net/S5y2x/

Credits for above code: https://stackoverflow.com/a/5214204/3739658

I tested it on Firefox and Chrome

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

1 Answers1