Html – CSS challenge, can I do this without introducing more HTML?

csshtml

Imagine I have any block or inline block with text in it. Like a paragraph or li or whatever. If that tag has the "separator" class, I want it to appear as follows:

All content is centred (text-align:center; will suffice).
Here's the tricky part: on either side of the centred content, a (vertically-centred) line appears.

The following image illustrates my idea:

Approximate example of what I'd like it to look like (although this is using text... "------ SEPARATE ------"

If I have to introduce more HTML, then forget about it – not interested.

I'm a long time CSS user, but I can't figure this one out… Anyone else got an idea? As much as I love it, preferably no CSS3 (for work… can't use new stuff because of compatibility)..

Example problem: <p class="separator">CENTRE ME</p>

Best Answer

This works in Firefox:

.separator {
    text-align: center;
    height: 0.5em;
    border-bottom: 2px solid black;
    margin-bottom: 0.5em;
}
.separator:first-line {
    background-color: white;
}

JSFiddle Demo

Related Topic