background-color on heading with pseudo-element

Question

I am trying to make a heading with a trailing bar. I used the pseudo-element ::after.

My problem is the background color of the heading should "block out" the part of the ::after element that is located "under" the heading itself - but it doesn't.

HTML:

<div>
    <h3>TEST</h3>
    <p>blah blah blah blah blah blah blah blah blah blah blah</p>
    <h3>TEST 2</h3>
    <p>blah blah blah blah blah blah blah blah blah blah blah</p>
</div>

CSS:

body{
    font-size: 0.9em;
    font-family: Arial;
}
div{
    width: 300px;
    margin: 0 auto;
}
h3{
    font-size: 200%;
    background-color: hsl(0, 0%, 100%);
    margin: 0px;
    display: inline-block;
    padding-right: 20px;
}
h3::after{
    content: '';
    display: block;
    width: 300px;
    height: 1.3rem;
    background: hsl(200, 30%, 20%);
    margin-top: -1.7rem;
}

jsFiddle

You want the after background-color to be behind the default h3 background-color? — Bojan Petkovski, Oct 10 '14 at 09:18

score 2 · Answer 1 · answered Oct 10 '14 at 09:17

It would be much simpler (and support a wider range of browsers) for you to just wrap your text within a span element:

<h3><span>TEST</span></h3>

And then give your h3 element a block display with the required background colour, then give your span element an inline-block display with the overlay colour:

h3{
    font-size: 200%;
    background: hsl(200, 30%, 20%);
    margin: 0px;
    display: block;
    padding-right: 20px;
}

h3 span {
    background: hsl(0, 0%, 100%);
    display: inline-block;
}

JSFiddle demo.

You can then offset this by giving your span element the desired padding.

I agree..much simpler. One thing..aren't headings `display:block` by default? — Paulie_D, Oct 10 '14 at 09:21

score 1 · Accepted Answer · answered Oct 10 '14 at 09:18

1

Position the pseudo-element absolutely...it's also cleaner css.

JSfiddle Demo

CSS

body{
    font-size: 0.9em;
    font-family: Arial;
}

div{
    width: 300px;
    margin: 0 auto;
}
h3{
    font-size: 200%;
    background-color: hsl(0, 0%, 100%);
    margin: 0px;
    position: relative;
    overflow: hidden;
}
h3::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    margin-left: 20px;
    background: hsl(200, 30%, 20%);

}

answered Oct 10 '14 at 09:18

Paulie_D

107,962
13
142
161

Paulie, I am accepting your answer cause it actually answers my question instead of providing alternative solutions :) Thanks for the quick response! – Brian Emilius Oct 10 '14 at 09:23
You are welcome but **James Donnelly** is not wrong so you might want to upvote that answer too...even if you chose to accept this one. – Paulie_D Oct 10 '14 at 09:26

background-color on heading with pseudo-element

2 Answers2