在設計網頁時，我們經常需要在標題中加一些裝飾，以使得頁面的風格更加獨特。其中，一種非常常見的方式就是在標題中加上豎線。下面我們就來學習如何在CSS中使用豎線來美化標題。
首先，我們需要使用CSS的偽元素選擇器“::before”和“::after”。這兩個選擇器會在元素的內容前和內容后插入一些HTML代碼，我們可以通過CSS來為這個HTML代碼添加樣式。
讓我們來比較一下標題中沒有豎線和有豎線的樣子：
沒有豎線：

<p><h2>這是一個標題</h2></p>

有豎線：

<p><h2>這是一個標題</h2></p>
<style>
h2::before {
content: "|";
padding-right: 10px;
}
</style>

從上面的代碼可以看出，我們通過為“h2”元素的偽元素選擇器“::before”添加一個管道符“|”，并通過“padding-right”屬性來控制豎線與文本之間的距離。
當然，我們也可以為“::after”偽元素選擇器添加豎線，甚至同時為前后兩個偽元素選擇器都添加豎線：

<p><h2>這是一個標題</h2></p>
<style>
h2::before {
content: "|";
padding-right: 10px;
}
h2::after {
content: "|";
padding-left: 10px;
}
</style>

通過上面的代碼，我們成功地為標題欄中添加了漂亮的豎線。這種方式簡單易用，非常適合在網頁中加入一些必要的裝飾，從而使得頁面更加美觀。