CSS字體旁邊有橫線是一種常見的文本修飾方式，可以將文本內(nèi)容添加一條橫線，以突出文本的重要性或特殊含義。在CSS中，通過text-decoration屬性可以實現(xiàn)字體旁邊有橫線的效果。

.text {
text-decoration: underline;
}

以上代碼將給具有class為text的元素添加一條下劃線。除了下劃線，text-decoration屬性還支持其他幾種樣式，如overline（上劃線）、line-through（中劃線）、none（無線條）、underline overline（上下劃線）、underline line-through（下劃線和中劃線）等。

如果需要進一步設(shè)置線條的樣式、顏色、粗細等屬性，可以使用text-decoration-line、text-decoration-color、text-decoration-style屬性。

.text {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
}

以上代碼將給具有class為text的元素添加一條雙下劃線，并將線條顏色設(shè)置為紅色。

需要注意的是，text-decoration屬性默認只對文本起作用，如果想要將其他元素（如圖片、按鈕等）旁邊添加橫線，可以使用偽元素::before和::after來模擬一個文本元素。

.btn::before {
content: "";
display: inline-block;
margin-right: 5px;
height: 1px;
width: 20px;
background-color: black;
}

以上代碼將給class為btn的按鈕添加一個黑色的橫線。

通過對text-decoration屬性的靈活使用，可以讓文本內(nèi)容變得更加生動、突出，同時也可以擴展到其他元素的修飾中。