Forums

Give help. Get help.

  • # July 23, 2015 at 11:40 am

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

    The markup and CSS are:

    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?

    # July 23, 2015 at 12:41 pm

    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.

    # July 23, 2015 at 1:48 pm

    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?)

    # July 23, 2015 at 11:07 pm

    IMO = IN MY OPINION

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag