Help me design this status progress breadcrumb in css


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 :smile:

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! :slight_smile:

Thank you!!


You’re welcome. It was an interesting challenge :smile:

1 Like
Off Topic:

Nah, that’s encouraged! The “Like” button can’t always say what you want to say. So we strongly encourage letting you voice your appreciation :slight_smile: