I tried to create a headline which has a line behind the actual text, but it just didn’t work. I’ve uploaded an image how it should look like in the end without using extra html markup or background images.
thank you for your solution, I really appreciate it. But I miss the flexibility, imagine we have a 500px column and text changes from day to day and the line in the background has to fill out the whole width (500px) except the space where the text is.
Maybe it’s possible to tweak your draft to gain that flexibility, I tried to work with floating, but it didn’t work :)
By setting the line-container element to 500px you define your width.
Set the background of the element to a gradient that renders the horizontal blue line. This will be displayed across the full 500px width.
Inside the container put your ‘h1′ heading, adding a ‘span’ element that contains your heading text, now you cannot see the blue line.
The ‘h1′ element will auto size to fill the available width (note: if your text exceeds 500px width it will move over 2 lines). Set the background of the ‘h1′ element to transparent, you will see the blue line through the whole text.
Set the background of the ‘span’ element to white, and only the background of the text within the ‘span’ will be white. You can now see the blue line to the left and right of the required text.
Your Text Goes Here