css下划线为图片滑动

CSS下划线是网页设计中常用的一种效果，但如果要用图片实现下划线的滑动效果，该如何实现呢？以下代码可以供您参考。

/* HTML代码 */
<p class="underline">使用图片实现下划线滑动效果</p>

/* CSS代码 */
.underline {
    position: relative;
    display: inline-block;
}

.underline:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-image: url('underline.png');
    transition: width .3s ease-out;
}

.underline:hover:after {
    width: 100%;
} 

在HTML中，使用了一个class名为underline的p标签。在CSS中，将其定位为相对定位（relative），并加上一个伪元素:after。这个伪元素的content属性设置为空，即没有具体内容。因为我们只需要它来作为下划线的容器，实现下划线的滑动效果。

首先在伪元素的样式中，将其定位到p标签的底部，具体位置为left:0,bottom:0。然后，将其宽度设置为0，高度设置为2像素，在这里可以根据实际需要来设置下划线粗细和高度。而背景图片则使用了background-image属性，将下划线图片的路径放入其中即可。

此时的效果是下划线仍然不可见。接着，为伪元素的width属性设置过渡效果，让下划线在鼠标悬浮时慢慢延伸出来。这里的transition属性将宽度过渡的时间设为了0.3秒，过渡效果采用了ease-out的渐变效果。

最后，为了实现下划线的滑动效果，对悬浮状态的p标签的伪元素的宽度属性进行了修改。将其设置为100%，即让下划线的宽度与p标签的宽度相等，实现下划线的滑动效果。

以上代码仅供参考，您可以根据自己的需求进行修改和调整，实现符合自己需求的下划线效果。