Html 如何创建类似于此图像的悬停/活动链接？

男人需要你的帮助 我正在创建一个带有悬停和活动链接的菜单列表，类似下图。 我需要在链接下面创建一个渐变圆

为了更好地理解，这是一个示例图像。

这是我的代码：

标题，ul{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景颜色：玉米丝；
}
保险商实验室{
高度：80px；
}
李{
列表样式类型：无；
填充：0 18px；
}
标题a{
字体大小：14px；
颜色：#555555；
文字装饰：无；
}
标题a：悬停{
颜色：#EB6060；
}
.主动{
颜色：#EB6060；
}

不清楚图片，我想线性渐变效果就足够了


标题，ul{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景颜色：玉米丝；
}
保险商实验室{
高度：80px；
}
李{
列表样式类型：无；
填充：0 18px；
}
标题a{
字体大小：14px；
颜色：#555555；
文字装饰：无；
位置：相对位置；
}
标题a：悬停{
颜色：#EB6060；
}
.主动{
颜色：#EB6060；
}
标题a：悬停：：之后，
.active:：之后{
位置：绝对位置；
内容：“；
顶部：1.4em；
左：钙（50%-.3em）；
宽度：.6em；
高度：0.6em；
背景图像：线性梯度（45度，rgb（230100101），rgb（145152229））；
边界半径：50%；
盒影：1px 1px 5px 0px#ccc；
}













谢谢。它起作用了。但是圆圈没有到李的中心。我更新了密码。现在它在中间，运转良好。非常感谢。