Modify the width of :after pseudo CSS element from JQuery [duplicate]

Question

I am trying to dynamically change the width of an element in :after. But it is not reflecting. Can someone please help!

$(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>

Here is the Link to JSFidle

Question.. What is the purpose of the psuedo? Do you have dynamic content? — Cam
– Cam, Commented May 30, 2017 at 16:12
Even better option: stackoverflow.com/questions/17788990/… — Twisty
– Twisty, Commented May 30, 2017 at 16:14
@Cam: I am trying to change the width so as to make it function like a progress bar. — Kshri
– Kshri, Commented May 30, 2017 at 16:14

Gabriele Petrioli · Accepted Answer · 2017-05-30 16:27:28Z

1

You should use the, now available, 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>

answered May 30, 2017 at 16:27

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Modify the width of :after pseudo CSS element from JQuery [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related