css 滑动下划线 |css将图片变成圆形

//html代码：
<div class="underline">这是一个滑动下划线的例子</div>
//CSS代码：
.underline{
position: relative;
display: inline-block;
padding-bottom: 5px;
}
.underline::before{
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out;
}
.underline:hover::before {
visibility: visible;
transform: scaleX(1);
}

大家首先为需要加下划线的元素设置 position: relative; 和 display: inline-block; ，然后使用伪元素 ::before 来生成一条宽度为100%、高度为1px、颜色为黑色的下划线，并将其定位在元素底部，使用 visibility: hidden; 和 transform: scaleX(0); 将其隐藏，并在过渡效果 transition 中加入 all 参数，以便实现动画效果。

最后，在 HOVER 时将其 visibility 和 transform 两个参数设为需要的值，从而达到滑动显示下划线的效果。

以上就是使用CSS实现滑动下划线效果的方法，希望对您有所帮助！