Horizontal borders next to text

[Anlino]

I was wondering if there is any efficient way to accomplish the effect on the header here.

In that document, I'm using "bottom:-15px;" on the span for the header text and putting it above the div with the border. I have been trying to find a more efficient way to do this, but without any luck. All help is appreciated!

 

[smoovo]

Use "text-decoration:line-through;". You can use it your way, but here is fast and small example.

<span style="text-decoration:line-through;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
SMOOVO
<span style="text-decoration:line-through;">&nbsp;&nbsp;&nbsp;&nbsp;</span>

- Enjoy.

 

[d a v e]

or if it's only for the first heading then just apply a background image to your h1 with css (made up from one image with 2 lines)

 

[Anlino]

Thanks for the replies!

Unfortunately, I'm going to use the effect for the post date displayed between posts on a blog – www.spelnyheter.nu – and as that means that the space the text will take up will vary, neither of these solutions would work.

The solution I used in the example i posted works because the div behind the span for the header is on top of the border, and has the same tileable background as the rest of the document. That wouldn't work on the blog because of a semi transparent gradient PNG that makes the top part of the content area darker than the lower parts. If I used the same method as in the example, the background for the cover-up div would stand out from the background of the page.

 

[PixelPusher]

Yeah this one is tough....only way to create it dynamically would be to use an image background in the text element to "mask" the line through the text.

But, like you said, that will be a no go if the background changes as the page lengthens.

Im stuck on this one???

I will let you know if i figure something out.

 

[Anlino]

Meh, whatever. I tried to remove the gradient effect in order to get the line-through effect to work, but that made the website look too plain. I'll just have to find some other design for the post dates. Any ideas?