如何在多个元素的中间添加分割线但是每个元素的宽度不一样

可以使用伪元素和绝对定位来实现。具体步骤如下：

1. 给每个元素设置一个相对定位的父元素。

2. 给每个元素设置一个 class 名称，用于区分不同的元素。

3. 使用伪元素 ::before 或 ::after，设置样式为分割线，比如 border-right: 1px solid #ccc;。

4. 使用绝对定位，将分割线放置在每个元素的中间位置。

5. 根据每个元素的宽度和数量，计算出分割线的位置和长度。

以下是示例代码：

HTML：

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

CSS：

.wrapper {
  position: relative;
}
.item1::before,
.item2::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: 1px solid #ccc;
}
.item1::before {
  left: 50%;
}
.item2::before {
  left: calc(50% + 100px); /* 根据第一个元素的宽度计算 */
}
.item3::before {
  display: none; /* 最后一个元素不需要分割线 */
}

注意，以上代码仅为示例，具体的宽度和位置需要根据实际情况进行调整。