I've been attempting to dynamically adjust the width of an element using :after, but for some reason, my changes are not being applied. Can someone offer assistance with this issue?
$(function(){
var a=20;
$(".progress:after").width(a+"%");
// Despite setting it to 20%, the width still displays as 50% as defined in the CSS
});.progress {
width:200px;
height:50px;
border:1px solid black;
position:relative;
}
.progress:after {
content:'\A';
position:absolute;
background:black;
top:0; bottom:0;
left:0;
width:50%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress"></div>For reference, you can also view the JSFiddle Link.