在網頁設計中，使用CSS可以非常方便地實現各種復雜的效果，包括添加橫線。下面我們就來介紹一下如何使用CSS實現橫線的效果。

首先，我們需要使用CSS中的偽元素::before或者::after來創建一個虛擬元素，然后對這個虛擬元素進行樣式設置來實現橫線效果。比如說，我們可以為虛擬元素的content屬性添加一個空格字符，然后設置它的border-bottom樣式，如下所示：

.text::before {
content: "";
display: block;
border-bottom: 1px solid black;
}

其中，.text是一個具有文字的元素，通過::before偽元素來添加橫線。這里的content屬性設置為空格字符是因為虛擬元素默認是沒有內容的，我們需要為它添加一些內容讓它產生作用。border-bottom屬性用來設置下邊框的樣式，這里將它設置為1像素的實線，顏色為黑色。

如果我們需要自定義橫線的寬度、顏色或者樣式，可以根據我們的需要對border-bottom屬性進行設置。例如，如果我們需要一個紅色的虛線橫線，可以這樣設置：

.text::before {
content: "";
display: block;
border-bottom: 1px dashed red;
}

通過這樣的設置，我們就可以在元素下面添加一個橫線效果。當然，我們也可以使用偽元素::after來添加橫線效果，只需要將樣式設置調整一下即可。