html - 更改伪 :before background color using CSS attr()

Question

我正在尝试使用 CSS attr() 更改伪 :before 元素的背景颜色。

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

这是 CSS

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

但是根据 data-color 属性，before 元素不显示背景颜色。

但是当我添加这个 CSS 时

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

:after 元素将data-color 属性内容显示为内容。

这是 JS fiddle http://jsfiddle.net/b7Rve/

我做错了什么？

更新

我刚刚重读了 Mozilla developer docs 中关于 color 的内容.它说 color 类型是实验性的。我想我还需要等到它被释放。

Answer 1

请看这个其他线程 Setting width with CSS attr() .

简而言之:“根据 Mozilla Developer Network 的文档，它仅与 CSS 内容属性兼容 [...]，但不能(目前)用于为其他属性生成值。”

---

2016 年 5 月 16 日更新:

查看Mozilla Developer Network's documentation现在是可能的，但要小心:

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

因此，实际上您可以使用它，但可以肯定的是，浏览器的支持虽然比过去更好，但仍然很少且处于试验阶段。