修改 :after 来自 JQuery 的伪 CSS 元素的宽度 [重复]答案

【问题标题】：Modify the width of :after pseudo CSS element from JQuery [duplicate]修改 :after 来自 JQuery 的伪 CSS 元素的宽度 [重复]
【发布时间】：2017-10-31 05:08:10
【问题描述】：

我正在尝试动态更改 :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 的 Link

【问题讨论】：

您不能使用$(".progress:after") 作为选择器。
问题.. psuedo 的目的是什么？你有动态内容吗？
看这个stackoverflow.com/questions/29260296/…
更好的选择：stackoverflow.com/questions/17788990/…
@Cam：我正在尝试更改宽度，使其像进度条一样发挥作用。

标签： javascript jquery html css

【解决方案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>

【讨论】：