CSS中的豎線往往用于在頁面中劃分不同的區域，如側邊欄和主要內容區域之間。豎線通常被繪制為一個長方形的垂直條形狀，它們可以是固定高度的，也可以自適應高度。

要實現自適應高度的豎線，我們可以使用CSS中的偽元素（pseudo-element）。我們使用偽元素“::before”或“::after”，然后使用內容屬性（content property）添加一個豎線圖像來創建一個豎線。

.content {
display: flex;
}
.content::before {
content: "";
width: 1px;
background-color: black;
margin-right: 20px; /* 豎線和內容區域的距離 */
}

這段CSS代碼中，“content”類表示豎線和內容元素的容器，“::before”是一個偽元素。通過添加一個空的內容屬性，我們就可以使用CSS樣式創建我們的豎線。

要讓豎線的高度自適應其父容器的高度，我們可以將“height”屬性設置為100%。

.content::before {
content: "";
width: 1px;
height: 100%;
background-color: black;
margin-right: 20px; /* 豎線和內容區域的距離 */
}

通過調整豎線的寬度和高度，我們可以創建一個自適應大小的豎線。此外，我們還可以在偽元素中添加其他樣式屬性，例如邊框、陰影、漸變等，以美化我們的豎線。