CODEWITHSUNDEEP
htmlcss
FinalDestiny
FinalDestiny

Reputation: 1188

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

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.com/wp/services/. The heading is 'Services', right above the 3 content areas...I'd like to achieve the same effect with only CSS. I tried some things but it didn't work.

Thank you.

Upvotes: 2

Views: 4097

Answers (4)

Dan
Dan

Reputation: 1995

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!

Upvotes: 0

anotherdave
anotherdave

Reputation: 6744

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

Upvotes: 2

Paulo R.
Paulo R.

Reputation: 15609

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;
}

Upvotes: 4

sachleen
sachleen

Reputation: 31131

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

Upvotes: 2

Related Questions