修改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>

這裏是Link到JSFidle

Answer 1

您應該使用，現已，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>