JQueryからの擬似CSS要素の後ろの幅を変更します。

Question

要素の幅を：afterで動的に変更しようとしています。しかし、それは反映されていません。助けてもらえますか？ここで

$(function(){ 
 
var a=20; 
 
$(".progress:after").width(a+"%"); 
 
// This is not showing 20%. Still shows 50% which was coded in 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>

はJSFidle

Answer 1

にLinkであるあなたが使用する必要があり、利用可能になりまし、HTML5 progress element。

$(function() { 
 
    var a = 20; 
 
    $("progress").prop('value', a); 
 
});

progress { 
 
    width:200px; 
 
    height:50px; 
 
    border:1px solid black; 
 
    position:relative; 
 
    background:transparent; 
 
} 
 
::-webkit-progress-bar{background:transparent;} 
 

 
::-moz-progress-bar{background-color:black;} 
 
::-ms-fill{background-color:black;} 
 
::-webkit-progress-value{background-color:black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<progress value="50" max="100"></progress>