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 my go at it... Only thing is the spans have a set width.

HTML

​

    
    asdf
    
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

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

DEMO