CSS中的導航欄底部下橫線是網頁設計中非常重要的一部分，可以美化頁面，增加用戶體驗。下面我們來看看如何實現導航欄的底部下橫線。 首先，在HTML文件中，我們需要設置nav標簽，并在其中設置ul標簽和li標簽，用來表示導航欄中不同的選項。

<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>

然后，在CSS文件中，我們需要使用偽類選擇器：hover來實現鼠標懸停時的效果。

nav ul li a:hover{
border-bottom: 2px solid #000000;
}

這段代碼意思是鼠標放在導航欄某個選項上，會在其下方添加一個2像素粗的黑色實線。 如果想要一開始就在某個選項下方顯示下橫線，可以使用如下代碼：

nav ul li a.active{
border-bottom: 2px solid #000000;
}

這里的.active是一個class，需要在HTML中手動為需要顯示下橫線的選項加上。 最后，如果想要調整下橫線的位置和寬度，可以使用如下代碼：

nav ul li a{
border-bottom: 2px solid #000000;
padding-bottom: 5px;
width: 80px;
text-align: center;
}

這里用到了padding-bottom和width屬性，分別控制下橫線距離選項文字的距離和下橫線的寬度。text-align屬性用來控制文字居中。 總之，CSS中的導航欄底部下橫線是一個重要的設計元素，我們可以通過偽類選擇器和屬性來實現不同的效果。希望本文能對大家有所幫助。