Safari currentColor bug in before/after

Demonstrates apparent bug in Safari currentColor when used for border-color in :after (or :before) pseudo elements.

HTML

<body>
    <p>Each of the items below should have a bottom border and a triangle that are the same color as its text. (The triangle is generated in CSS :after content.)</p>
    
    <div>
        <span class="red">Red</span>
        <span>Default</span>
        <span class="blue">Blue</span>
    </div>
        
    <p>This works correctly on Chrome, Firefox, and even IE9.</p>
    <p>But on Safari, the triangle will not show the currentColor&mdash;or even the inherited color. Instead, it seems to get stuck at the first color used on the line. (Tested on Safari 8.0.4 Yosemite and iOS 8.2.)</p>
</body>

CSS

span {
    display: inline-block;
    margin: 0 0.5em;
    border-bottom: 2px solid currentColor;
}

span::after {
    /* This creates a triangle after the div.
     * Adapted from Foundation
     * https://github.com/zurb/foundation/blob/v5.5.1/scss/foundation/components/_global.scss#L89-L115
     */
    content:"";
    display: inline-block;
    width: 0;
    height: 0;
    border: inset 0.4em;
    border-color: currentColor transparent transparent transparent;
    border-top-style: solid;
    margin-left: 0.4em;
    vertical-align: middle;
}


/* Text colors */
 body {
    color: #222;
}
.red {
    color: #c00;
}
.blue {
    color: #009;
}

/* Spacing */
 body {
    padding: 0 1em;
}
p, div {
    margin: 1.5em 0;
}