Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [SOLVED] ::after works in Chrome, Firefox & Safari but IE11 strips it out.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #205419
    alxfyv
    Participant

    I’ve styled the <hr /> using in part the ::after pseudoelement. See this test page.

    The markup and CSS are:
    http://codepen.io/alxfyv/pen/pJxvjJ

    The § sign is added using the ::after pseudoelement.

    Everything works as expected in Chrome, Firefox and Safari but in IE11 not so much. IE11 strikes out all the property declarations for ::after leaving a null rule: hr::after {}.
    image not available
    Or see the screenshot on Screencast.

    The questions are:
    1. Why? and
    2. How to make it work in IE 11?

    #205421
    Paulie_D
    Member

    Technically no browser should support pseudo elements on self-closing elements (<br/>, <hr/>, <input /> etc) as they have no “internal space” to hold them but….some do so nevertheless.

    This is what the W3c spec says

    Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element’s document tree content. The ‘content’ property, in conjunction with these pseudo-elements, specifies what is inserted.

    http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field

    Obviously IE11 is stricter than the rest

    Frankly, the default fallback you actually have in IE11 is good enough IMO.

    #205427
    alxfyv
    Participant

    Ahh … so much to learn!

    Actually I read the spec but didn’t light on the phrase “an element’s … content“.

    So obvious after it’s pointed out.

    Thanks for an excellent answer.

    (BTW what’s IMO?)

    #205446
    Paulie_D
    Member

    IMO = IN MY OPINION

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.