Create more beautiful headlines with pseudo elements?

[eck]

Hello,

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.

Image

Do you know a solution? In my case it does not have to work with IE or older browser versions.

Thank you for your help!

Regards
Eck

[Paulie_D]

Sure: http://tinkerbin.com/eMmNZPz1

[eck]

Hey Paulie_D,

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 :)

Does any one of you has a clue?

Thanks!

[chrisjg]

Here is a way to achieve it, building on the work of Paulie_D …
http://tinkerbin.com/66BHA1Kr

Explanation

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.

HTML

Your Text Goes Here

CSS

.line-container {

width:500px;

overflow:hidden;

background: -webkit-linear-gradient(

top,

white,

white 49%,

blue 50%,

blue 52%,

white 52%,

white);

margin-top:25px;

margin-bottom:25px;

}



h1 {

text-align:center;

background: transparent;

}



span {

background-color:white;

}

Hope this helps,

Chris.

[joshuanhibbert]

I’ve had a look at all options so far, and I would do it in a similar way to @cnwtx, although without the need for overflow: hidden; http://jsfiddle.net/joshnh/2dUqV/

If you didn’t want to rely on the parent element (e.g. the header isn’t at the top of its parent) then you would have to use an additional element.

[eck]

Wow, I really like your ideas. The last one from @joshuanhibbert works perfect for me, because it is really flexible and simple.

I hope I’m not the only person who can benefit from it..

Thanks to all of you!

[Author]

Posts