在開發網頁時，CSS 是不可或缺的一部分。其中，偽元素可以幫助我們實現一些特殊的效果，比如使用橫線來裝飾文字。

使用偽元素 ::after 和 content 屬性，我們可以在文本后面插入一個橫線:

p::after{
content: '';
display: block;
width: 50%;
height: 1px;
background: #000;
}

上面的代碼中，首先我們使用 ::after 偽元素在段落的末尾位置插入了一個空內容的塊級元素。然后，我們設置了它的寬度為段落的一半，高度為 1 像素，背景色為黑色。這樣，就實現了一個橫線的效果。

還可以使用 ::before 偽元素來在文本前面插入一條橫線，代碼如下：

p::before{
content: '';
display: block;
width: 50%;
height: 1px;
background: #000;
}

同樣是使用 ::before 偽元素，不同的是我們將它的位置放在了文本前面，其他的設置和 ::after 偽元素的一樣。

還可以將上下兩個橫線組合起來，實現一條帶下劃線的裝飾效果：

p::before{
content: '';
display: block;
width: 50%;
height: 1px;
background: #000;
float: left;
margin-right: 10px;
}
p::after{
content: '';
display: block;
width: 50%;
height: 1px;
background: #000;
float: right;
margin-left: 10px;
}

上面的代碼中，我們使用了兩個偽元素 ::before 和 ::after，將兩條橫線分別放在了段落的前后。并且通過 float 屬性將它們兩個分別靠左和靠右，再通過 margin 屬性調整它們之間的距離。

通過偽元素和 CSS，我們可以實現各種各樣的裝飾效果，提升網頁的視覺效果。