Hi guys,

I'm have a right mess about trying to figure out how to do something that would initially seem trivial with HTML and CSS. I am looking to have a centered heading that has a horizontal line stretching from each side of the text to the beginning and end of the container. Something like this:

-------------------------------------- Heading here -------------------------------------

Bearing in mind that the text is of variable length. I've tried many things but the closest I have managed to get is the following (I'm just doing everything inline to test at the moment)

<div style="position: relative; text-align: center; padding: 5px 0;">
    <span class="" style="padding: 0 10px; background-color: #ffffff; z-index: 2;">Some text</span>
    <hr style="height: 1px; width: 100%; border: 0; padding: 0; margin: 0; position: absolute; top: 10px; left: 0; background-color: #000000; z-index: 1;">

This almost works. The issue is that you can still see the HR line through the text, even though I have tried setting a background colour of white (Essentially I would like this to work no matter what the background colour is though). Does anyone have any idea on how such an effect can be achieved through pure HTML and CSS?


5 Years
Discussion Span
Last Post by bops
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.