熒光導航條在網頁設計中經常使用，它能夠使導航欄更加突出和引人注目。下面我們就來介紹如何使用CSS來設置熒光導航條。

.nav-bar {
background-color: #333;
width: 100%;
height: 60px;
text-align: center;
position: relative;
}
.nav-bar:before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background: #fff;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
.nav-bar:hover:before {
transform: scaleX(1);
}

首先，我們給導航條添加一個類名為.nav-bar，并設置其寬度、高度和背景顏色等樣式。接下來，我們使用 CSS 偽元素:before來為導航條添加一個熒光條。通過position: absolute和bottom: 0來使熒光條在導航條底部。我們設置熒光條的高度為 4px，并且先將其寬度transform: scaleX(0)縮小到 0，使其在默認狀態下不可見。

接下來，當我們將鼠標移動到導航條上時，我們使用nav-bar:hover:before的偽選擇器來設置熒光條的寬度，將其transform: scaleX(1)擴展到導航條的寬度，使得熒光條更加醒目，引人注目。

通過以上方法，我們就可以快速而簡單地設置熒光導航條，突出導航欄的重要性，提高用戶體驗。