Estoy tratando de establecer el ancho de un elemento usando attr () en CSS pero no funciona. Chrome dice "valor de propiedad no válido" pero no estoy seguro de lo que está mal.

Estoy tratando de usar el atributo "prog" como el ancho en porcentaje para el .progress div.

Aquí está mi ejemplo en codepen.

<div class="progresscontainer">
    <div class="progress" prog="10">
    </div>
</div>

.progresscontainer {
    position:absolute;
    background-color:black;
    width:500px;
    height:100px;
    border-radius:5px;
    border:1px solid black;
    overflow:hidden;
}
.progress {
    background-color: green;
    background: -webkit-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -webkit-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
    background: -moz-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -moz-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
    background: -ms-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -ms-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
    background: linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
    position:absolute;
    height:100%;
    width: attr(prog %);
}