H2 styling with line behind text?

This one should be pretty easy, but I can’t figure it out. How can I get a heading to look like the image below? Specifically the line behind the text



(My first attempt at posting a codepen)

If this shows up, you will see that it is similar to Ryan’s except that a background color or background pattern shows through the title. In other words, the line does NOT flow behind the title text.

1 Like

perhaps format the txt with strike-through?
or absolute position a line with a lower z-index, so it goes behind txt

You mean line-through? And impossible. Perhaps you could demo us an example since I can’t see how that would be possible (and be non-restrictive.)

1 Like

That’s what Ryan’s example does :smile:

Nice use of linear gradient there Ron :smile:

Here’s an old version of mine uploaded to codepen.

No extra element needed and background is left untouched.


et tu, Paulus.

That background is a stunningly nice touch… and only one element :respect:

1 Like

I can’t take credit for the background as I just grabbed it from Lea Verou’s excellent resource. (I could work it out myself but why bother when someone else has done the hard work :smile: )


did mean line through ye sorry. Thought it may be possible to line up the line through and that was what was wanted…

Kinda different to what I was thinking was wanted :stuck_out_tongue_closed_eyes:

1 Like

Yes, we all assumed that the line was not to go behind the text but just stay either side :slight_smile:

1 Like

I thought he wanted the line behind the text (dunno why!)

Pictures speak louder than words (where people misspeak and don’t say what they mean.) Refer to post #1 where he gives an image of what he means exactly.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.