css3の色でデータ属性を使用

Question

値に応じてプログレスバーの色を付けようとしています。

progress[value]::-webkit-progress-value { 
    position: relative; 
    background-color: rgba(0, attr(value) ,0,1); 
    background-size: 35px 20px, 100% 100%, 100% 100%; 
    border-radius:3px; 

    /* Let's animate this */ 
    animation: animate-stripes 5s linear infinite; 
} 

attr（value）のように見えますが、そこに値を挿入する方法はありますか？クロムの使用

Answer 1

前に擬似要素を使用して進捗状況を表示している場合は、 これはうまくいくかもしれませんか？

progress[value]::-webkit-progress-value { 

    &:before{ 
     content: [attr-data]; 
     display: block; 
     position: relative; 
     background-color: rgba(0, attr(value) ,0,1); 
     background-size: 35px 20px, 100% 100%, 100% 100%; 
     border-radius:3px; 

     /* Let's animate this */ 
     animation: animate-stripes 5s linear infinite;  
    } 

}