How to have a horizontal line in the middle of an html header using CSS?

Question

Good. Now I use the image for this, but I want to do it using CSS (without absolute or relative positioning, I want to make it responsive).

An example is here: http://teothemes.com/wp/services/ . The title is “Services,” right above the 3 content areas ... I would like to achieve the same effect with CSS only. I tried some things, but that didn't work.

Thanks.

Answer 1

Here is how I would do it → http://tinkerbin.com/QN9efWHd

• CSS3 background-image
• span with background covering background image.

HTML ...

<p> <span>Services or Something</span> </p> 

... for CSS ...

 p { background: linear-gradient (to bottom, rgba(145,37,37,0) 49%, rgba(145,37,37,1) 51%, rgba(145,37,37,1) 52%, rgba(145,37,37,0) 54%); text-align: center; } span { display: inline-block; padding: 0 10px; background: #fff; } 

Answer 2

Here is my move ... The only thing spans has is the width of the set.

HTML

 ​<div id="hr"> <span></span> asdf <span></span> </div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

CSS

 #hr span { width:200px; border-bottom:1px solid #ccc; display: inline-block; margin-bottom:5px; } 

Demo

Answer 3

Using one floating range with a border:

 <div class="heading"> <span></span> <h3>Heading<h3> </div> .heading { width: 100%; text-align: center; line-height: 100%; } .heading span { float: left; margin: 20px 0 -8px; border: 1px solid; width: 100%; } .heading h3 { display: inline; padding: 0px 0px 0 20px; width: auto; margin: auto; } 

A negative base margin on the span may need to be adjusted for different header sizes., The background color of the header should match the background of the full container.

JS Fiddle demo

Answer 4

I looked at a bunch of solutions to this problem, and I really wanted something simple. Why not just use :before and :after to embed some content in the header in which you want to have a horizontal rule / line. In my CSS below, I selected EM DASH ( unicode \2014 ) for the horizontal header line. When creating a larger horizontal line and depending on your font, you need to subtract the distance between the letters from several EM DASHes. Finally, you can add some additions to the head and tail of the EM DASH so that it does not click on your title text.

Here is some CSS, header-1 is very simple, header-2 has a longer line (see the action https://jsfiddle.net/pyxkh3jz/ ):

 h1:before, h1:after { content:"\2014"; } h2:before, h2:after { /* two dashes */ content:"\2014\2014"; /* depending on your font adjust this */ letter-spacing: -6px; } /* add some padding so heading text isn't touching lines */ h2:before { padding-right: 15px; } h2:after { padding-left: 15px; } 

Did not check browser compatibility; but this is not radical CSS, so it should work for some or most of you. The lines and their length correspond to my use case.

This idea can probably be improved by other fans ... on it!