CODEWITHSUNDEEP
css
user3758718
user3758718

Reputation: 131

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

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

The design looks like this below:

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

Upvotes: 2

Views: 1914

Answers (1)

imbondbaby
imbondbaby

Reputation: 6411

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

Upvotes: 2

Related Questions