css遍历数组时用竖线隔开展示

你可以使用CSS的伪元素和`content`属性来实现在数组元素之间添加竖线的效果。下面是一个示例：

HTML:

<div class="array">
  <span>元素1</span>
  <span>元素2</span>
  <span>元素3</span>
  <span>元素4</span>
</div>

CSS:

.array {
  display: flex;
}

.array span:not(:last-child)::after {
  content: " | ";
}

在上面的示例中，我们将数组元素包裹在一个`<div>`元素中，并使用Flexbox布局来使它们水平排列。然后，通过使用`:not(:last-child)`选择器，我们为除了最后一个元素之外的所有元素添加了一个伪元素`::after`。在伪元素的`content`属性中，我们设置了竖线符号" | "。

这样，当你应用这段CSS代码后，数组元素之间就会显示为用竖线隔开的效果。你可以根据实际需要修改HTML和CSS代码来适应你的场景。