在CSS中插入一個(gè)豎線(xiàn)，通常是通過(guò)使用CSS的偽元素（::before或::after）或者CSS的transform屬性來(lái)實(shí)現(xiàn)，下面是一些示例代碼，展示如何在CSS中插入一個(gè)豎線(xiàn)：

示例1: 使用偽元素

.vertical-line {
  position: relative;
}
.vertical-line::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px solid #000;
}

示例2: 使用transform屬性

.vertical-line {
  width: 2px;
  height: 100%;
  background-color: #000;
  transform: rotate(-90deg);
}

示例3: 使用SVG圖像

另一種方法是使用SVG圖像來(lái)創(chuàng)建豎線(xiàn)，這種方法可以創(chuàng)建可伸縮的豎線(xiàn)，并且可以在CSS中輕松控制位置。

1、創(chuàng)建一個(gè)SVG文件（例如vertical-line.svg），包含以下內(nèi)容：

<svg height="100%" width="2px" xmlns="http://www.w3.org/2000/svg">
  <rect width="2px" height="100%" fill="#000" />
</svg>

2、然后在CSS中引用該SVG文件：

.vertical-line {
  background-image: url('vertical-line.svg');
  background-repeat: repeat-y;
}

示例4: 使用CSS的border屬性

.vertical-line {
  height: 100%;
  border-left: 1px solid #000;
}

應(yīng)用示例

假設(shè)你有一個(gè)HTML元素如下：

<div class="vertical-line"></div>

你可以選擇上述示例中的任何一個(gè)方法來(lái)在該元素中插入一個(gè)豎線(xiàn)，使用偽元素的方法：

.vertical-line::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px solid #000;
}

這樣，你的HTML元素中就會(huì)有一個(gè)豎線(xiàn)，你可以根據(jù)需要調(diào)整豎線(xiàn)的樣式、位置和大小。