As in my post in the HTML section of this forum, how can I design this using CSS:
Can a CSS template be created for this so that only the text has to be filled for each level of completion?
Actually this status graphic will be used in a table like this:
So what I want is to be able to create a “template” of CSS which can then be re-used for different progressions…
Thanks in advance! Any help appreciated!
You can do something like this:
It should work in IE9+. Ie8 will display but look a little funky
If you want to support older browsers then you would need extra elements instead of using :after and :before.
Hope it helps.
At the risk of the post getting flagged and already having clicked the heart button, I still have to say this to you @PaulOB - You’re awesome! Thanks for the quick and succinct solution!
You’re welcome. It was an interesting challenge