Strange CSS :after effect in card columns

[itsMattShull]

I'm using Bootstrap 4 masonry card layout for a project and inside that project I have a <select> that has custom styles. Part of the custom styles is a caret made with CSS using :after. Different browsers give me different results and I wanted to post it here in case someone had a solution. I'm not sure if this is a Bootstrap issue or a CSS spec issue so maybe someone could shed light there too.

Here's a demo: http://codepen.io/derekshull/pen/GZQaRY

• Chrome Canary: everything looks fine
• Chrome: the first column looks fine but any columns after the first look bad, unless you go to mobile (where I have it set to only 1 column), then it shows up fine there. It's only if there are more than 1 columns.
• Firefox: everything is fine
• Safari: the first column appears but any columns after the first one the caret AND the text don't appear.

[cvrebert]

Safari: the first column appears but any columns after the first one the caret AND the text don't appear.

WebKit Nightly matches Chrome Canary, so it's already been fixed; just need to wait for Safari to ship a new version.

[cvrebert]

Closing since this involves custom CSS and since the browser bugs have already been fixed in bleeding-edge browser versions.
If you're looking for a workaround in the mean time, you can ask on StackOverflow/IRC/Slack; see https://github.com/twbs/bootstrap/blob/master/README.md#community for links.

[itsMattShull]

Taking out overflow:hidden; made it work on all browsers for some odd reason.