Thay đổi pseudo: trước màu nền bằng cách sử dụng CSS attr()

Question

Tôi đang cố gắng sử dụng CSS attr() để thay đổi màu nền của phần tử giả :before.

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

Đây là CSS

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

Nhưng các yếu tố trước khi không hiển thị màu nền theo thuộc tính data-color.

Nhưng khi tôi thêm CSS này

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

Yếu tố :after cho thấy nội dung data-color thuộc tính như nội dung.

Đây là JS fiddle http://jsfiddle.net/b7Rve/

Tôi đã làm gì sai?

CẬP NHẬT

Tôi chỉ đọc lại về color trong Mozilla developer docs. Nó nói rằng loại color là thử nghiệm. Tôi đoán tôi vẫn cần đợi cho đến khi nó được thả ra.

Answer 1

Vui lòng xem chủ đề khác Setting width with CSS attr().

Nói tóm lại: "theo tài liệu Mozilla Developer Network, chỉ tương thích với thuộc tính nội dung CSS [...], nhưng có thể không (chưa) được sử dụng để tạo ra giá trị cho các thuộc tính khác."

---

CẬP NHẬT 16 Tháng Năm 2016:

Nhìn vào Mozilla Developer Network's documentation tại là possibile nhưng một cách thận trọng:

Hàm attr() có thể được sử dụng với bất kỳ thuộc tính CSS nào, nhưng hỗ trợ cho các thuộc tính khác với nội dung là thử nghiệm.

Vì vậy, trên thực tế bạn có thể sử dụng nó, nhưng chắc chắn hỗ trợ của trình duyệt, tốt hơn so với trước đây, vẫn chỉ hiếm và thử nghiệm.

Answer 2

You can set color attributes with conditions like this one 

http://jsfiddle.net/vijay1989/kwvokxsx/6/