CSS中要寫豎杠可以使用::before偽元素來實現，具體的代碼如下：

div {
position: relative;
padding-left: 20px;
margin-bottom: 20px;
}
div::before {
content: "";
position: absolute;
left: 0;
top: 5px;
bottom: 5px;
width: 2px;
background-color: #000000;
}

上述代碼主要包含兩個部分，一個是給要添加豎杠的元素設置一個相對定位的樣式，以及一個左內邊距，這是為了讓豎杠與元素的文本內容有一定的間隙。另一個是通過偽元素::before添加一個實現豎杠的絕對定位的元素，通過left、top、bottom、width來控制豎杠的位置、粗細以及長度。

同時也可以通過CSS3的線性漸變來實現豎杠的效果，代碼如下：

div {
padding-left: 20px;
margin-bottom: 20px;
background-image: linear-gradient(to bottom, black 50%, transparent 50%);
background-size: 2px 100%;
background-position: left center;
}

上述代碼通過設置元素的背景圖片為一條漸變的線性背景圖案，其中黑色部分占據了漸變的上半部分，而透明部分占據了下半部分。通過設置背景圖片的尺寸為2px 100%，以及背景位置為左側中央，實現了豎杠的效果。