HTML5 progress bar "ending" styling - html

Question

I want to style the "ending" of the current progress of the HTML5 progress bar by adding small black dot to it, see the screen. So this dot must move as progress moves
But the code I found here doesn't work anymore. It worked few weeks ago or so, but now it's not - see the codepen
Maybe someone knows what happened or how to achieve my goal?
Thanks a lot!
P.S. Here is the HTML/CSS I use
HTML:
<progress value="1400" max="4261"></progress>
CSS
progress {
/* Positioning */
position: absolute;
left: 0;
top: 0;
/* Dimensions */
width: 100%;
height: 50px;
/* Reset the appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of the default border in Firefox/Opera. */
border: none;
/* Progress bar container for Firefox/IE10+ */
background-color: transparent;
/* Progress bar value for IE10+ */
color: #00D38D;
}
progress[value]::-webkit-progress-value {
position: relative;
background: #00d38d;
}
progress[value]::-webkit-progress-value::after {
content: '';
width: 20px;
height: 20px;
position: absolute;
right: 10px;
top: 15px;
border-radius: 50px;
background: black;
}
progress::-webkit-progress-bar {
background-color: transparent;
}
progress::-webkit-progress-value {
background-color: #00D38D;
}
progress::-moz-progress-bar {
background-color: #00D38D;
}

Answer 1

You don't need a pseudo element to get this effect. Here it is using a gradient on the main style. (Tested only in Chrome)
progress {
/* Positioning */
position: absolute;
left: 0;
top: 0;
/* Dimensions */
width: 100%;
height: 50px;
/* Reset the appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of the default border in Firefox/Opera. */
border: none;
/* Progress bar container for Firefox/IE10+ */
background-color: transparent;
/* Progress bar value for IE10+ */
color: #00D38D;
}
progress::-webkit-progress-value {
background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}
progress::progress-value {
background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}
<progress value="1400" max="4261"></progress>

Answer 2

I read here that the pseudo css appears not to work with the progress element:
I wish that I could have used :after (or ::after) rules instead, but
these pseudo-elements don’t work with the progress tags in any browser
that doesn’t use the polyfill. And no, :before doesn’t work either. I
have no idea why it doesn’t work, but it’s a shame — using them would
be perfect to get rid of the extra markup.
Found here: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
I'm not sure why it was working before, I haven't been able to find a non JS way to emulate the effect of using the ::after css.
Here's a codepen from that article you referenced where it's not working as well.
They appear to be using the same method as you and it has no function:
progress[value]::-webkit-progress-value:after {
/* Only webkit/blink browsers understand pseudo
elements on pseudo classes. A rare phenomenon! */
content: '';
position: absolute;
width:5px; height:5px;
top:7px; right:7px;
background-color: white;
border-radius: 100%;
}
You may have to implement some sort of javascript or use a different method other than the HTML5 progress element to implement this.
Numbars has some similar stuff to what you're trying to do, but you may need to modify it a decent amount to get it functioning the way you want.
Sorry this isn't exactly a solution, but hopefully you can find a workaround that's not too tough to create.