Strange CSS :after effect in card columns (original) (raw)

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.