CSS字體橫線是在文字下面加入一條線，可以用來表示刪除線、下劃線、導航菜單等效果。下面我們來看一些樣式設置的代碼：

/*下劃線*/
.text-underline{ 
text-decoration: underline; 
}
/*刪除線*/
.text-through{ 
text-decoration: line-through; 
}
/*導航菜單*/
.nav-menu{ 
border-bottom: 2px solid black; 
}

其中，text-decoration是用來設置文字樣式的屬性，underline代表下劃線，line-through代表刪除線。而border-bottom是用來設置邊框樣式，2px代表線的寬度，solid代表直線樣式，black是線的顏色。

另外，在使用CSS字體橫線時，需要注意以下幾點：

1. 在設置刪除線和下劃線時，文字顏色和字體大小也要一同設置。

2. 導航菜單一般只需要在hover或active狀態下加入橫線。

3. 可以結合偽類使用，例如:hover或:before。

下面是一個結合偽類的例子：

/*懸停時下劃線*/
.nav-link:hover{ 
text-decoration: underline; 
}
/*連接前加下劃線*/
.nav-link:before{ 
content: ""; 
border-bottom: 2px solid black; 
position: absolute; 
bottom: -5px; 
width: 0%; 
transition: width 0.3s ease-in-out; 
}
/*懸停時下劃線擴展*/
.nav-link:hover:before{ 
width: 100%; 
}

在這個例子中，我們使用了:before這個偽類，來給連接加上下劃線。使用position:absolute來設置位置，然后使用width和transition屬性來實現懸停時下劃線擴展的效果。

總之，CSS字體橫線是一個常用的樣式，在設計網頁的過程中可以靈活使用，來增強文字的表現力。