CSS是設計網頁布局的重要工具，它可以讓我們實現各種各樣的效果，比如設計左側豎線。

.left-line {
border-left: 2px solid #000;
height: 100px;
}

上面的代碼是實現左側豎線的代碼。首先，我們要定義一個類名為left-line的樣式，接著使用border-left屬性來實現向左側繪制一條寬度為2像素、顏色為#000（黑色）的實線。

為了讓這條豎線的高度和對應元素的高度保持一致，我們給這個元素設置了一個高度為100像素（可以自行根據實際情況進行調整）。

除了使用border-left屬性以外，還可以使用其他方法實現左側豎線的設計，比如使用偽元素：

.left-line {
position: relative;
}
.left-line::before {
content: "";
position: absolute;
top: 0;
left: -2px;
width: 2px;
height: 100%;
background-color: #000;
}

這段代碼中，我們添加了一個::before偽元素，使用左定位和寬度實現繪制一條寬為2px的黑色豎線。使用相對定位為偽元素相對于父元素定位，達到和父元素同一位置效果。

以上兩種方法都是實現左側豎線的常見方式，可以根據實際需求選擇合適的方法來進行實現。