CSS是前端開發中的必備技能，掌握它可以實現各種想象得到的效果。在網頁中畫豎線也是一種常見的要求，下面我們就來介紹一下如何使用CSS實現畫豎線。

/* CSS代碼 */
.line{
height: 100px; /* 豎線高度 */
width: 2px; /* 豎線寬度 */
background-color: #000; /* 豎線顏色 */
}

首先，我們需要一個容器來承載這條豎線，給它起個名字叫line。這個容器的高度可以根據需要自己設置，寬度需要設置為2px，因為我們要畫的是豎線。接下來，我們需要設置豎線的顏色。這里我設置成黑色，你可以根據需要選擇其他顏色。

最后，我們在HTML中插入這個容器，就可以看到我們畫出的豎線了。

以上就是使用CSS實現畫豎線的方法，非常簡單吧。但是，有時候我們需要畫多條豎線，這時候就需要在容器中使用偽元素了，具體方法可以參考下面的代碼。

/* CSS代碼 */
.line{
position: relative;
height: 100px;
}
.line:before,
.line:after{
content: "";
position: absolute;
top: 0;
width: 2px;
background-color: #000;
height: 100%;
}
.line:before{
left: -10px;
}
.line:after{
right: -10px;
}

我們還是使用.line這個容器，不過這次我們需要設置它的position屬性為relative，這樣我們才能在里面使用偽元素（before和after）。接下來，我們分別為兩個偽元素設置寬度為2px、顏色為黑色、高度為100%（跟父容器高度保持一致）。然后，我們又給第一個偽元素設置left為-10px，第二個偽元素設置right為-10px，這樣就可以將兩個豎線推到容器的兩側。

在HTML中插入這個容器，就可以看到我們畫出的兩條豎線了。