全屏下劃線是一種在網頁設計中非常流行的效果，它在展現文本內容的同時提升了美學美觀，是一種很好的設計選擇。下面我們來介紹如何使用CSS實現全屏下劃線。

要實現全屏下劃線，我們首先需要設置一個寬度為100%的容器，并將其定位到頁面的底部。接著，我們可以使用偽元素before或after來添加下劃線，如下所示：

.container {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
}
.container::before {
content: "";
display: block;
border-bottom: 2px solid #000;
}

上述代碼將創建一個高度為100px的容器，并在容器下方添加了一條2px粗的黑色下劃線。

如果你想要使下劃線占據整個頁面的寬度，可以使用padding來撐開容器的寬度：

.container {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
padding-left: 50%;
transform: translateX(-50%);
}
.container::before {
content: "";
display: block;
border-bottom: 2px solid #000;
position: absolute;
top: 0;
width: 100vw;
left: 0;
}

上述代碼將創建一個高度為100px的容器，并將它的左側填充了50%的寬度再平移左移50%的距離。接著，我們使用絕對定位和vw單位來讓下劃線覆蓋整個頁面。

希望這篇文章對你實現全屏下劃線有所幫助。使用CSS實現全屏下劃線是一種簡單而有用的設計技巧，可以讓你的網頁設計更豐富多彩。