CSS的短豎線可以通過CSS中的偽元素:before (或者:after)來實現。這種CSS技巧的常見用途是在菜單、分隔符、列表中插入豎線。

/*定義一個元素*/
div {
position: relative;   /*設置相對定位*/
height: 50px;         /*設置元素的高度*/
width: 100%;          /*設置元素的寬度*/
}
/*定義偽元素:before來創建短豎線*/
div:before{
content:'';
position: absolute;   /*設置絕對定位*/
top: 0;               /*設置在距離元素頂部0像素的位置*/
bottom: 0;            /*設置在距離元素底部0像素的位置*/
width: 1px;           /*設置短豎線的寬度*/
background-color: #000; /*設置短豎線的顏色*/
left: 50%;            /*設置在元素的中間*/
transform: translateX(-50%);
}

上述代碼中，我們首先定義了一個div元素，并在其:before偽元素中創建了一個每個元素的豎線。主要的CSS屬性是絕對定位（用于將豎線放置在元素的中心）、寬度（1像素）和背景顏色（黑色）。此外，我們還使用了transfrom屬性來將元素向左移動它的寬度。

總之，通過使用CSS偽元素:before或:after，可以在內容之前或之后添加一個短的豎線。這可以很容易地擴展到菜單、分隔符等擴展項目中。