CSS技巧：如何制作文字中間的豎線

在CSS中，我們可以使用多種方法制作文字中間的豎線，以下是幾種常見的方法：

1、使用偽元素（Pseudo-elements）

我們可以利用偽元素在文字中間插入豎線，使用::before或::after偽元素插入豎線，這種方法適用于單行文本。

.text-with-vertical-line {
  position: relative;
}
.text-with-vertical-line::before {
  content: "|";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

2、使用Flexbox布局

我們可以使用Flexbox布局制作文字中間的豎線，這種方法適用于多行文本。

.text-with-vertical-line {
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-with-vertical-line > * {
  position: relative;
}
.text-with-vertical-line > *::before {
  content: "|";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

3、使用SVG圖像

我們可以使用SVG圖像制作文字中間的豎線，這種方法適用于任何長度的文本。

<div class="text-with-vertical-line">
  <svg height="100%" width="1px" viewBox="0 0 1 100">
    <rect x="0" y="0" width="1" height="100%" fill="black" />
  </svg>
  <span>你的文本</span>
</div>

.text-with-vertical-line {
  position: relative;
}