I'm having some trouble setting the width of an element using attr() in CSS. Chrome keeps giving me an "invalid property value" error and I can't figure out what's causing it.
What I'm attempting to do is use the attribute "prog" as the percentage width for the .progress div.
You can view my code example on CodePen here.
<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 %);
}