Css 如何设计div或li'；它看起来像这个进度条吗？

我不知道这叫什么，所以我不能很好地回答这个问题。我想做的是制作一个条形图，显示流程中已完成的步骤，如下所示：

我不知道如何做这种效果，因为我不知道它叫什么，所以我没有找到任何例子或任何东西

---

如何制作上图中的内容？

它被称为

进度跟踪器

，它看起来类似于

面包屑导航，但有不同的行为和用途

请参见下面的示例以及两者之间的区别

要在纯css中构建进度跟踪器，请参见以下内容。
这里是一个开始设计样式的好地方：

您看到的是：


背景的css渐变：

文本上的文本阴影

框阴影设置为灯光细节的插入

可能还有一些非常高级的：在之前和：之后的积分样式：

@他要求的是进度跟踪，而不是面包屑