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

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

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

總之，通過(guò)使用CSS偽元素:before或:after，可以在內(nèi)容之前或之后添加一個(gè)短的豎線(xiàn)。這可以很容易地?cái)U(kuò)展到菜單、分隔符等擴(kuò)展項(xiàng)目中。