如何用CSS实现鼠标悬停时的圆点+长线段效果

想要实现的底部悬停效果如下：

尝试用linear-gradient结合边框图片实现，但无法得到圆角边缘，使用的代码如下：

padding-block-end: 0.4rem;
border-block-end: 0.3rem solid;
border-image-source: linear-gradient(to right,
        rgb(255, 255, 255) 0% 30%,
        rgb(206, 21, 181) 33% 40%,
        rgb(255, 255, 255) 43% 45%,
        rgb(219, 17, 192) 48% 70%,
        rgb(255, 255, 255) 73% 100%);
border-image-slice: 10% 20%;
border-radius: 10px;

最终得到的效果却是：

问题原因 #

border-image属性会忽略border-radius设置，所以无法通过这种方式实现圆角边缘。推荐使用伪元素+线性渐变的方案，既能实现想要的图案，又能轻松添加圆角。

实现代码 #

/* 给目标元素设置相对定位，作为伪元素的容器 */
.target-element {
  position: relative;
  padding-block-end: 0.4rem;
}

/* 用伪元素生成底部装饰 */
.target-element::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.3rem; /* 对应原来的border高度 */
  background: linear-gradient(to right,
    rgb(255, 255, 255) 0% 30%,
    rgb(206, 21, 181) 33% 40%,
    rgb(255, 255, 255) 43% 45%,
    rgb(219, 17, 192) 48% 70%,
    rgb(255, 255, 255) 73% 100%);
  border-radius: 10px; /* 这里的圆角会生效 */
}

关键说明 #

• 伪元素设置为绝对定位，相对于父元素底部对齐，确保装饰线位置正确
• 直接给伪元素的background设置线性渐变，替代原来的border-image方案
• border-radius直接作用在伪元素上，能完美实现圆角边缘
• 渐变的百分比可根据需求微调，精准匹配圆点和长线的比例

内容的提问来源于stack exchange，提问作者Sadhana Sapkota