CSS中的偽類元素是一種在選擇器中使用的特殊語法，它可以用來向HTML元素添加不同的樣式。其中，用來繪制豎線的偽類元素是:before和:after。下面我們將詳細介紹如何使用這兩種偽類元素來實現豎線的繪制。

首先，我們需要在CSS中定義偽類元素，并添加相應的樣式。例如，在:before偽類元素中添加如下樣式：

.content:before {
display: block;
content: "";
height: 100%;
width: 1px;
background-color: #000;
position: absolute;
left: 0;
}

上述代碼中，我們通過設置display屬性為block，使:before偽類元素變成一個塊級元素。然后，使用content屬性添加內容，這里我們將其設置為空。接下來，設置height屬性為100%，將豎線的高度設置與其父元素相同。width屬性設置為1px，使豎線的寬度只有1像素。然后，我們給豎線添加背景顏色，并將其position屬性設置為absolute，從而實現與父元素的相對位置。最后，設置left屬性為0，將豎線定位在父元素的最左側。

另外，我們還可以使用:after偽類元素來繪制豎線。例如，在:after偽類元素中添加如下樣式：

.content:after {
display: block;
content: "";
height: 100%;
width: 1px;
background-color: #000;
position: absolute;
right: 0;
}

上述代碼中，我們與:before偽類元素的代碼相似，只需要將left屬性改為right屬性即可。這樣，我們就可以在HTML元素的左側或右側添加豎線了。

綜上所述，使用:before和:after偽類元素可以方便地實現豎線的繪制。我們只需要定義其樣式，然后將其添加到需要繪制豎線的HTML元素中即可。這種方法可以有效地美化頁面，提高用戶體驗。