How to have a horizontal line at the middle of a html heading with CSS?

Question

Ok I now use an image to do it, but I want to do it via CSS(no absolut or relative positioning, I\'m looking to make it responsive).

Example here: http://teothemes.

Answer 1

Here's how I'd do it -> http://tinkerbin.com/QN9efWHd

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

the HTML...

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

... for the 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

I was looking at a bunch of solutions to this issue, and I really wanted something simple. Why not just use the :before and :after to embed some content into the heading you want to have a horizontal-rule/line in. In my CSS below I chose an EM DASH (unicode \2014) for the heading's horizontal line. When making a larger horizontal line, and depending on your font, you need to take away letter spacing from multiple EM DASHes. Lastly you can add some padding to the head & tail of the EM DASH so that it doesn't press up against your heading text.

Here's some CSS, heading-1 is very simple, heading-2 has a longer line (see in 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;
}

Haven't checked browser compatibility here; but this isn't radical CSS so it should work for some or most of you. The lines and their length fit my use case.

This idea can probably be improved upon by other keeners...have at it!

Answer 3

Using one floated span 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;
}

The negative base margin on the span may need to be adjusted for different heading sizes. , The background colour of the heading should match the background of the overall container.

JS Fiddle demo

Answer 4

Here's my go at it... Only thing is the spans have a set width.

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