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

.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;
}

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

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

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