Change pseudo :before background color using CSS attr()

Question

I'm trying to use CSS attr() to change background color of a pseudo :before element.

<ul>
    <li data-color="#ff0000">R</li>
    <li data-color="#00ff00">G</li>
    <li data-color="#0000ff">B</li>
</ul>

Here's the CSS

ul {
    list-style: none;
}
li:before {
    background-color: attr(data-color, color);
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
}

But the before element doesn't show background color according to the data-color attribute.

But when I add this CSS

li:after {
    content: attr(data-color);
}

The :after element shows the data-color attribute content as the content.

Here's the JS fiddle http://jsfiddle.net/b7Rve/

What did I do wrong?

UPDATE

I just reread about color in the Mozilla developer docs. It says that color type is experimental. I guess I still need to wait until it's released.

Answer 1

Please, look at this other thread Setting width with CSS attr().

In short: "according to Mozilla Developer Network's documentation, is only compatible with the CSS content property [...], but cannot (yet) be used to generate values for other properties."

---

UPDATE MAY 16, 2016:

Looking at Mozilla Developer Network's documentation now is possibile but with caution:

The attr() function can be used with any CSS property, but support for properties other than content is experimental.

So, actually you can use it but surely browsers' support, altough better than in the past, is still only rare and experimental.