在設計網站時，導航欄通常是最重要和最突出的組件之一。通過為導航欄添加底部邊框，可以幫助提高用戶對頁面結構和導航的理解。在CSS中，我們可以使用偽元素來快速為導航欄添加底部邊框。

.nav {
position: relative;
display: inline-block;
}
.nav::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 4px;
width: 100%;
background-color: #f2f2f2; /* 底部邊框的顏色 */
}

上述代碼中，我們首先將導航欄設置為相對定位，為了讓底部邊框的位置以其為基準，接下來我們使用偽元素::after來為導航欄添加底部邊框。在偽元素::after中，我們設置了內容為空，使用絕對定位將其位置固定在導航欄的左下角。然后將高度設置為4像素，寬度設置為100%，以便邊框與導航欄寬度相匹配。

最后，我們為底部邊框定義了一個背景顏色，可以根據自己的喜好進行修改。通過這種方法，不僅可以輕松地為導航欄添加底部邊框，而且還可以為其增加動畫效果，改變顏色等。

總之，添加底部邊框是創建美麗導航欄的簡單而有效的方式。無論您的網站是什么主題，使用CSS可以輕松地為導航欄的用戶體驗增添色彩！