CSS是一種強大的樣式表語言，它可以幫助我們美化網頁內容使之更加吸引人。在網頁設計中，常常需要使用豎線來分隔不同的內容塊。那么如何用CSS實現豎線呢？

/* 使用border實現豎線 */
.border-line{
border-left: 1px solid #ccc;
}
/* 使用偽元素“::before”實現豎線 */
.before-line::before{
content: '';
display: inline-block;
width: 1px;
height: 100%;
background-color: #ccc;
margin-right: 10px; /* 可選添加的右側間距 */
}
/* 使用偽元素“::after”實現豎線 */
.after-line::after{
content: '';
display: inline-block;
width: 1px;
height: 100%;
background-color: #ccc;
margin-left: 10px; /* 可選添加的左側間距 */
}

上述代碼中，我們使用了三種方法來實現豎線。第一種方法是使用border屬性，我們可以為元素的左側添加一條寬度為1像素的實線，從而呈現出豎線的效果。第二種和第三種方法是使用偽元素，通過添加一個空白的偽元素，并設置其寬度為1像素、高度為100%，背景色為灰色，并將其放置在元素的左側或右側，并添加可選的間距，從而實現豎線的效果。

以上就是如何使用CSS實現豎線的方法，可以根據不同的需求選擇合適的方法，達到最佳的效果。希望通過本文能夠為您的網頁設計提供幫助。