在網頁設計中，我們經常需要為一些文字添加裝飾性的效果，比如在文字前后加上橫線。使用 CSS 樣式可以輕松地實現這一效果。

/* 在文字前加橫線 */
.text-before {
border-top: 1px solid #000;
padding-top: 10px;
}
/* 在文字后加橫線 */
.text-after {
border-bottom: 1px solid #000;
padding-bottom: 10px;
}

上述 CSS 樣式中，我們分別為需要添加橫線的文字元素添加了 class 類名text-before和text-after。那么我們在 HTML 頁面中就可以通過調用這些類來實現效果的展示。

<p class="text-before">這是一段文字，文字前有一條橫線</p>
<p class="text-after">這是一段文字，文字后有一條橫線</p>

如此，我們就可以實現文字前后的橫線效果了。當然，我們也可以通過更改樣式進行個性化的調整，比如更改橫線的顏色、粗細等等，以達到更好的效果。