0

I want to draw a line to the left and right of a headline, like this:

headline decoration example

Normally I would do this by adding a border-top to the surrounding element and the following style for the headline.

h2
{
   margin-top:-10px;
   padding: 0 5px;
   background:white;
}

But in this case, I cant do it this way, because the background of the surrounding element is transparent, as you can see in this fiddle: http://jsfiddle.net/tUmZY/2/

I'm playing around with this for a while now, but I have no idea how to achieve this. I would appreciate any sollution, as long as the effect is the desired.

Sebastian Starke
  • 5,198
  • 3
  • 24
  • 35
  • 3
    This has been asked numerous times, try this out. http://stackoverflow.com/questions/5985009/how-can-i-make-a-fieldset-legend-style-background-line-on-heading-text – Daniel Beacham Jan 31 '13 at 19:01

1 Answers1

0

Are you looking for something like this:

CSS:

h2:before, h1:after {
    content: '';
    position: absolute;
    border-top: 1px solid white;
    width: 100%;
    top: 50%;
}
h2:before {
    right: 100%;
}
h2:after {
    left: 100%;
}
BHUSHAN
  • 78
  • 1
  • 6
  • Im sorry, but that didn't work for me (There are no lines). Dont mind, Daniels comment is exactly what I was looking for. It is the same technique as yours. Thanks anyway! – Sebastian Starke Jan 31 '13 at 19:54