在Web開發中，導航欄是一個常用的頁面元素。為了讓用戶更好地了解當前所處的導航位置，在導航欄中添加一個指示標是非常必要的。本文將介紹如何使用CSS實現導航欄指示標。

首先，在HTML中定義好導航欄并設置好樣式，這里我們假設導航項都是水平排列的，并且需要在選中項下方添加指示標。HTML代碼如下：

<div class="nav">
<ul>
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">關于</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>

其中，class為“active”的li標簽代表當前選中項。

接下來，我們需要使用CSS來實現指示標。我們可以設置一個偽元素，利用border屬性來畫出一個三角形形狀，代碼如下：

.nav .active::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border: 10px solid transparent;
border-top-color: #333;
}

該代碼表示，在選中的li標簽下方添加一個偽元素，利用border屬性畫出一個三角形圖形，該三角形的上邊框顏色為#333，其余三邊框設置為透明，最后通過position、bottom、left和transform屬性來控制偽元素的位置。

最后，我們還需要設置一些樣式美化導航欄，例如鼠標懸停時的背景色和字體顏色的變化等。代碼如下：

.nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.nav li {
margin-right: 20px;
}
.nav a {
display: block;
padding: 10px 0;
color: #333;
text-decoration: none;
text-align: center;
}
.nav a:hover {
background-color: #eee;
}
.nav .active a {
color: #fff;
background-color: #333;
}
.nav .active::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border: 10px solid transparent;
border-top-color: #333;
}

通過以上的CSS代碼，我們成功美化了導航欄，并在選中項下方添加了指示標。