IE doesn't show :after pseudo element

Question

I am styling the <hr> element with an pseudo element but Internet Explorer 11 doesn't support it.

This is how it should look like: http://oi57.tinypic.com/23rsio2.jpg

hr { 
    height:1px; 
    background-color:#D1D1D1;
    border:0; margin:30px 90px;
}

hr:after { 
    background:url('../images/hr.png') no-repeat top center; 
    content:""; 
    display:block; 
    height:30px; 
    position:relative; 
    top:-15px; 
}

I hope someone can help me. Thanks in advance!

@ŠimeVidas If you need a Fiddle to be able to answer this question, you should consider revising your knowledge. — Niet the Dark Absol, Jul 11 '14 at 14:16
@NiettheDarkAbsol If you think I asked for an jsFiddle because I wasn't able to answer this question, you should consider revisiting your logic. — Šime Vidas, Jul 12 '14 at 18:23

score 2 · Accepted Answer · answered Jul 11 '14 at 14:14

2

Psuedo-elements are handled as children of the element they are attached do.

<hr>
    <psuedo-element-after> image here </psuedo-element-after>
</hr>

This is not valid, because <hr /> doesn't allow children. Therefore, it won't work.

Consider applying the background image to the <hr /> itself, or use something like a class to do it, like this: <div class="divider"></div>

answered Jul 11 '14 at 14:14

Niet the Dark Absol

301,028
70
427
540

Interesting. I wonder if this is browser-based then because Chrome does show the after pseudo-element on hr tags, as does Firefox [see here](http://jsfiddle.net/aD47G/) – Alex Jul 11 '14 at 14:19
@Niet the Dark Absol so IE is correct or Firefox have wrongly implemented? AS FF display the image. check the link in FF http://jsbin.com/tivazafi/1/edit. – Kheema Pandey Jul 11 '14 at 14:20
2

Interesting indeed, but contrary to what may be popular belief, Internet Explorer is *correct* in this instance. Chrome and Firefox *should* be refusing the render the psuedoelement. – Niet the Dark Absol Jul 11 '14 at 14:21
@NiettheDarkAbsol Could your reaffirm your statement that `::before`/`::after` doesn't apply on void elements with a spec link? Or are you just assuming? – Šime Vidas Jul 12 '14 at 18:29
I tested `hr::after { content: 'Test' }` in Chrome, Firefox and IE11. The pseudo-element is rendered in all these browsers, so it seems that pseudo-elements *are* valid on `
` and other void elements. – Šime Vidas Jul 12 '14 at 18:37

IE doesn't show :after pseudo element

1 Answers1