Normalize hr overflow

[jnowland]

As you can put pseudo elements on hr elements the overflow property is now something that should be 'normalized'.

This property in IE7 was set to visible which is the same as what chrome and firefox currently do.

However IE 8, 9, 10 set overflow to hidden.

Usecase: http://codepen.io/jnowland/pen/JoYKNP

[necolas]

Do all browsers let you add pseudo-elements to hr elements? Since it's a replaced content element, I didn't think they did.

[bartveneman]

Tested in IE 10 and it does the trick. Not sure what that means, though.

[jnowland]

@necolas http://www.browserstack.com/screenshots/57f08554dfaa74bf810fe02c375223ec0c3b524f

It appears that all browsers other than IE8 allow you to add generated content to a hr element.

[7studio]

@necolas You can see more examples of this funny trick there: http://css-tricks.com/simple-styles-for-horizontal-rules/

[EloquentZebra]

This isn't supposed to work, as far as I know, because <hr> s are no-content style elements (they have no closing tag). But as you can see, it does.

This is written on the site you mentioned.

If you are concerned about uber-long-term design fidelity, stay away from those.

Especially this is important because normalize.css should make everything look the same everywhere. And when some browsers are supporting the ::before and ::after for <hr> and some not, it shouldn't be implemented.

[jnowland]

With pseudo-elements not working in IE8 - One of the browsers normalize supports would it be worth considering inverting the property to hr { overflow: hidden} so chrome and firefox are normalized to the IE8+ setting?

[jonathantneal]

I have confirmed that overflow is visible in Chrome 16+, Safari 5+, and Firefox 4+, and that overflow is hidden in Edge 12 and Internet Explorer ≤ 11. Whether one intends to use pseudo-elements or not, this does normalize their display, and helps those using a technique featured in CSS Tricks for at least 5 years.

[jonathantneal]

Thanks, @jnowland. Merged as 46e3e05