Dynamic widths for css class with ::after pseudoelement - html

Question

I'm doing some mvc testing and I've hit a roadblock when I'm going through my model to display some elements. Each element will have to have an "EXP" amount that is displayed dynamically in the ::after element in the css.
Is there a way to dynamically change the width of the ::after element? I am passing through the width for each element through the model but I don't display it yet
That's the bar that needs to change dynamically, here's an example piece of code of how I've done it so far:
.pkmn-pc {
color: white;
margin: 10px;
display: inline-block;
}
.pkmn-summary, .pkmn-info {
display: table-cell;
vertical-align: middle;
height: 60px;
}
.pkmn-summary {
width: 193px;
background: #745fb5;
background: linear-gradient(15deg, #745fb5, #9a6dbb);
border-radius: 5px 0 0 5px;
box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
white-space: nowrap;
border-bottom: solid 5px grey;
text-align: left;
padding-left: 5px;
}
.pkmn-summary:after {
content: '';
position: relative;
left: -181px;
bottom: -31px;
height: 5px;
background: green;
width: 73%;
display: inline-block;
border-radius: 0 0 0 5px;
}
.pkmn-info {
background: #333538;
border-radius: 0 5px 5px 0;
width: 70px;
text-align: center;
box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
}
.pkmn-outer {
padding-bottom: 2px;
}
.pkmn-inner {
display: inline-block;
width: 3px;
}
.pkmn-sprite {
vertical-align: middle;
}
.pkmn-name {
font-size: 1.2em;
}
.pkmn-lvl {
font-size: 0.8em;
display: block;
}
.crown {
padding-top: 5px;
}
code {
padding: 0;
font-size: 1em;
color: white;
background-color: transparent;
border-radius: 0;
}
<div class="pkmn-pc">
<div class="pkmn-summary">
<img class="pkmn-sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" />
<code class="pkmn-name">15Characterssss</code>
</div>
<div class="pkmn-info">
<img class="crown" src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" />
<div class="pkmn-outer">
<img class="heart" src="https://image.ibb.co/kB8vi6/heart.png">
<div class="pkmn-inner"></div>
<img class="star" src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png">
</div>
<code class="pkmn-lvl">lvl 100</code>
</div>
</div>
Any help would be greatly appreciated! Thanks!

Answer 1

If you have the EXP value available in the data (along with the other user info), you could create an element (we'll call it .pkmn-exp) and set the experience level (or width) in an inline style.
For example, if the user has an experience level of 73/100:
<div class="pkmn-exp" style="width:73%;"></div>
where the 73 comes from the user's data.
.pkmn-pc {
color: white;
margin: 10px;
display: inline-block;
}
.pkmn-summary,
.pkmn-info {
display: table-cell;
vertical-align: middle;
height: 60px;
}
.pkmn-summary {
position: relative;
width: 193px;
background: #745fb5;
background: linear-gradient(15deg, #745fb5, #9a6dbb);
border-radius: 5px 0 0 5px;
box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
white-space: nowrap;
border-bottom: solid 5px grey;
text-align: left;
padding-left: 5px;
}
.pkmn-exp {
position: absolute;
left: 0px;
bottom: -5px;
height: 5px;
background: green;
display: inline-block;
border-radius: 0 0 0 5px;
}
.pkmn-info {
background: #333538;
border-radius: 0 5px 5px 0;
width: 70px;
text-align: center;
box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
}
.pkmn-outer {
padding-bottom: 2px;
}
.pkmn-inner {
display: inline-block;
width: 3px;
}
.pkmn-sprite {
vertical-align: middle;
}
.pkmn-name {
font-size: 1.2em;
}
.pkmn-lvl {
font-size: 0.8em;
display: block;
}
.crown {
padding-top: 5px;
}
code {
padding: 0;
font-size: 1em;
color: white;
background-color: transparent;
border-radius: 0;
}
<div class="pkmn-pc">
<div class="pkmn-summary">
<img class="pkmn-sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" />
<code class="pkmn-name">15Characterssss</code>
<div class="pkmn-exp" style="width:73%"></div>
</div>
<div class="pkmn-info">
<img class="crown" src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" />
<div class="pkmn-outer">
<img class="heart" src="https://image.ibb.co/kB8vi6/heart.png">
<div class="pkmn-inner"></div>
<img class="star" src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png">
</div>
<code class="pkmn-lvl">lvl 100</code>
</div>
</div>

Answer 2

Unfortunately you cannot script the ::after elements as they are not part of the dom.
You could either
Use a set of predefined classes and apply them to parent
add a bar element and script it like
var p = 0;
var bar = document.querySelector(".pkmn-bar");
window.setInterval(function() {
bar.style.width=p+"%";
p++;
if(p>100) p=0;
},50);
.pkmn-pc {
color: white;
margin: 10px;
display: inline-block;
}
.pkmn-summary, .pkmn-info {
display: table-cell;
vertical-align: middle;
height: 60px;
}
.pkmn-summary {
width: 193px;
background: #745fb5;
background: linear-gradient(15deg, #745fb5, #9a6dbb);
border-radius: 5px 0 0 5px;
box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
white-space: nowrap;
border-bottom: solid 5px grey;
text-align: left;
padding-left: 5px;
position: relative;
}
.pkmn-bar {
content: '';
background: #745fb5;
white-space: nowrap;
text-align: left;
position: absolute;
left: 0;
bottom: -5px;
height: 5px;
background: green;
display: block;
border-radius: 0 0 0 5px;
}
.pkmn-info {
background: #333538;
border-radius: 0 5px 5px 0;
width: 70px;
text-align: center;
box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
}
.pkmn-outer {
padding-bottom: 2px;
}
.pkmn-inner {
display: inline-block;
width: 3px;
}
.pkmn-sprite {
vertical-align: middle;
}
.pkmn-name {
font-size: 1.2em;
}
.pkmn-lvl {
font-size: 0.8em;
display: block;
}
.crown {
padding-top: 5px;
}
code {
padding: 0;
font-size: 1em;
color: white;
background-color: transparent;
border-radius: 0;
}
<div class="pkmn-pc">
<div class="pkmn-summary">
<img class="pkmn-sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" />
<code class="pkmn-name">15Characterssss</code>
<div class="pkmn-bar"></div>
</div>
<div class="pkmn-info">
<img class="crown" src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" />
<div class="pkmn-outer">
<img class="heart" src="https://image.ibb.co/kB8vi6/heart.png">
<div class="pkmn-inner"></div>
<img class="star" src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png">
</div>
<code class="pkmn-lvl">lvl 100</code>
</div>
</div>