CSS導(dǎo)航欄下橫線是網(wǎng)頁設(shè)計中比較常見的一個元素，它可以為導(dǎo)航欄增加更多層次感和美觀度。下面是一個簡單的示例：

.nav {
display: inline-block;
position: relative;
}
.nav:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: #000;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
transform: translateX(-50%);
}
.nav:hover:after {
width: 100%;
left: 0;
}

我們首先定義導(dǎo)航欄的樣式。這里我們使用了inline-block來將導(dǎo)航欄變?yōu)樾袃?nèi)塊元素，并且設(shè)置了它的position為relative。接著，我們使用了::after偽元素，并且將它的content屬性設(shè)置為空字符串。我們還設(shè)置了::after的position為absolute，這樣它就可以絕對定位在.nav元素內(nèi)部。我們將::after的bottom屬性設(shè)置為0，left屬性設(shè)置為50%。這樣，我們就讓它位于導(dǎo)航欄的中央下方。我們將::after的width屬性設(shè)置為0，這樣它將不可見，同時將height屬性設(shè)置為2px，這是我們要顯示橫線的高度。

接下來，我們設(shè)置了::after元素的背景顏色為黑色，并且定義了它的過渡效果和動畫效果，這樣將會讓橫線在鼠標(biāo)懸停時逐漸擴(kuò)展。我們還使用了translateX(-50%)屬性來將::after元素沿x軸方向向左移動50%，這樣橫線就位于導(dǎo)航欄的中央位置。

最后，我們定義了:hover偽類來在鼠標(biāo)懸停時觸發(fā)::after元素的樣式變化。我們將::after的width屬性設(shè)置為100%，這樣橫線就會展開，并且將left屬性設(shè)置為0，這樣橫線就會從導(dǎo)航欄中央位置逐漸擴(kuò)展至導(dǎo)航欄的兩端。這樣，我們就完成了CSS導(dǎo)航欄下橫線的樣式設(shè)置。