CSS導航下劃線是網頁開發中常見的一種效果，它可以幫助用戶快速定位當前所在頁面，給用戶帶來良好的使用體驗。下面我們將介紹如何使用CSS來實現這種效果。

nav {
display: flex;
justify-content: center;
align-items: center;
}
nav a {
position: relative;
}
nav a:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 2px;
background-color: #333;
transition: all 0.2s ease;
}
nav a:hover:after {
width: 100%;
}

以上代碼主要實現了以下幾個功能：

• 定義了一個nav容器，使用flex布局，并使子元素居中排列。
• 定義了nav容器里的a標簽，使用相對定位。
• 在a標簽上使用偽元素::after，設置下劃線的樣式，并使它位于a標簽的底部。
• 添加鼠標懸停效果，使用CSS的過渡動畫將下劃線寬度從0%變成100%。

需要注意的是，這種下劃線效果通常會與其他文本樣式組合使用，比如設置字體大小、顏色等等。需要根據實際情況進行調整。