CSS技巧：如何添加豎直線

在CSS中，我們可以使用多種方法添加豎直線，以下是其中一些方法：

1、使用偽元素（::before或::after）添加豎直線：

我們可以使用偽元素在元素的內(nèi)容前后添加裝飾性的內(nèi)容，我們可以在一個段落前后添加豎直線：

p {
  position: relative;
}
p::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: 1px solid black;
}
p::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  border-right: 1px solid black;
}

2、使用邊框（border）添加豎直線：

我們可以使用元素的邊框屬性添加豎直線，我們可以給一個段落添加左右兩邊的豎直線：

p {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

3、使用漸變（gradient）添加豎直線：

我們還可以使用CSS的漸變屬性來添加豎直線，我們可以給一個段落添加從透明到黑色的豎直線：

p {
  background: linear-gradient(to right, transparent, black);
}

是一些添加豎直線的方法，你可以根據(jù)自己的需求選擇適合的方法。