在網(wǎng)頁設(shè)計(jì)中，經(jīng)常會遇到需要對文字進(jìn)行修飾的情況。比如，我們可能需要為標(biāo)題加上一條下劃線，或者在文字上方添加一條橫線來進(jìn)行強(qiáng)調(diào)。

在 CSS 中，我們可以使用 border 屬性來為元素添加邊框。不過，當(dāng)我們需要添加一條只有一定長度的水平線時(shí)，使用 border 會比較繁瑣。這時(shí)，我們可以使用偽元素來解決這個(gè)問題。

下面，我們以添加左右兩個(gè)橫線為例來介紹如何使用偽元素：

/* 為要添加橫線的元素設(shè)置 position 屬性 */
h2 {
position: relative;
}
/* 使用 ::before 偽元素添加左橫線 */
h2::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 50px;
height: 1px;
background-color: #000;
transform: translateY(-50%);
}
/* 使用 ::after 偽元素添加右橫線 */
h2::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 50px;
height: 1px;
background-color: #000;
transform: translateY(-50%);
}

上面的代碼中，我們?yōu)?h2 元素設(shè)置了 position: relative 屬性，為其創(chuàng)建了兩個(gè) ::before 和 ::after 偽元素來添加左右兩個(gè)橫線。其中，content 屬性用于指定內(nèi)容為空字符串，這是 ::before 和 ::after 偽元素必須的屬性。而 left、right、top、height 屬性用于確定橫線的位置和高度。width 屬性用于設(shè)置橫線的長度，background-color 屬性用于設(shè)置橫線的顏色。

通過上面的代碼，我們便可以輕松為文字添加左右兩個(gè)橫線。同樣的方法，我們也可以為其他元素添加其他形式的線條裝飾，使頁面更具美感。