Html 在圆下方添加文本，以获得带圆的直线

如何在这些圆圈下方添加文本？例如，在1下面，写“邀请朋友”，在2下面写你选择的定制T恤

我发现下面有一个文本，但问题是它的宽度是固定的，有些文本会很长，所以这不是一个很好的解决方案

ul{
文本对齐：对齐；
位置：相对位置；
溢出：隐藏；
}
ul：之前，
.活动：之后{
内容：''；
宽度：100%；
边框：2个实心道奇蓝；
位置：绝对位置；
顶部：1米；
页边顶部：-2px；
z指数：-1；
}
.活动：之后{
边框颜色：浅蓝色；
}
ul：之后{
内容：“；
显示：内联块；
宽度：100%；
}
李{
宽度：2米；
高度：2米；
文本对齐：居中；
线高：2米；
边界半径：50%；
背景：道奇蓝；
边缘：0 1米；
显示：内联块；
颜色：白色；
}
.active~li{
背景：浅蓝色；
}

一,
二,
三,
4
五,

我相信这就是你想要的

我在您的

li

下添加了两个

div

——一个表示数字，一个表示内容。通过将

li

分解成更多的标记，子节点css（尤其是边距和溢出）的控制更容易管理

然后我将

ul:before

和

active:after

分开，以使它们更易于操作

您可能想在CSS上做一个差异，以查看我的所有更改

享受吧

ul{
文本对齐：对齐；
位置：相对位置；
溢出：隐藏；
}
ul：以前{
内容：''；
宽度：100%；
位置：绝对位置；
顶部：1米；
页边顶部：-2px；
边框：2个实心道奇蓝；
z指数：-2；
}
李：活动：之后{
内容：''；
宽度：100%；
位置：绝对位置；
顶部：1米；
页边顶部：-2px；
左边距：1米；
边框：2件纯色浅蓝色；
z指数：-1；
}
ul：之后{
内容：“；
显示：内联块；
宽度：100%；
}
li{}
ulli{
显示：内联块；
}
ul li部门编号{
宽度：2米；
高度：2米；
文本对齐：居中；
线高：2米；
边界半径：50%；
背景：道奇蓝；
边缘：0 1米；
颜色：白色；
}
ul li div.under{
位置：绝对位置；
前2名；
左：继承；
}
.active~li{
}

1.
一些文本


2.
更多的文字


3.
更多文本


4.


5.

谢谢。你能把文字居中吗？否则它看起来很乱。谢谢，我想我会把较小的清理细节留给你……：）