使用css制作標簽頁滑動橫線是網頁設計中常用的技巧。它不僅可以增強頁面的可讀性，還可以幫助用戶更清晰地了解當前所處的位置。以下是使用css制作標簽頁滑動橫線的方法：

.nav-tabs {
border-bottom: none;
overflow: hidden;
position: relative;
}
.nav-tabs::after {
content: "";
background: #337ab7;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.nav-link {
padding: 0.5rem 1rem;
position: relative;
}
.nav-link::before {
content: "";
background: #337ab7;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.nav-link:hover::before {
transform: scaleX(1);
}
.nav-link.active::before,
.nav-link.active:hover::before {
transform: scaleX(1);
}
.nav-link.active::before {
transform-origin: left;
}
.nav-link.active:hover::before {
transform-origin: right;
}
.nav-tabs .active::after {
transform: translateX(0);
}

以上代碼中，我們首先將標簽頁的底部邊框設為none，然后在底部添加一個偽元素::after，作為橫線，設定其顏色、高度和位置，初始狀態為不可見（即transform屬性設為translateX(-100%)）。當標簽頁中某個鏈接處于活動狀態時，給該鏈接的前一個元素（即上面的偽元素::before）添加一個橫線，以表示當前位置。同時，將::before的transform屬性設為scaleX(0)，在鏈接懸停或者active的狀態下再將其transform屬性設為scaleX(1)，使其出現滑動動畫效果。

至此，我們使用上述css代碼成功地制作了標簽頁的滑動橫線效果，為頁面的設計增添了不少亮點。