CSS控制豎線高度是網頁設計中非常常見的一種要求，優雅而簡潔的豎線效果可以為整個頁面增加一份亮點。在我們日常的網頁設計工作中，有時需要使用這種效果來增加頁面的美感和可視性。

.vertical-line{
width: 2px;
height: 50px;
background-color: #000;
display: inline-block;
margin: 0 10px;
}

如上述代碼所示，在CSS里我們可以使用width屬性來定義豎線的寬度，height屬性來定義豎線的高度。background-color屬性用于填充豎線的顏色，display屬性設置為inline-block，以便讓豎線成為行內元素并具有塊級元素的屬性。最后，margin屬性用于控制豎線與其他元素之間的間距。

這里需要注意的是，如果豎線的高度只需要在一小部分文字旁邊出現，可以使用偽元素來實現，避免使用過多的div元素。例如，以下代碼可以在文字前插入一個黑色豎線：

p::before {
content: "";
height: 50%;
width: 1px;
background-color: #000;
display: inline-block;
position: absolute;
left: -10px;
top: 25%;
}

通過這個實例，我們可以看出，使用CSS控制豎線高度既簡單又實用，可以讓我們在網頁設計中非常方便地添加豎線的效果，同時保持代碼的簡潔易讀。