在網頁設計中，下劃線不僅可以用來強調文字，還可以用來實現一些有趣的交互效果，比如滑動下劃線。下面我們來看看如何使用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實現滑動下劃線效果的方法，希望對您有所幫助！