如何在上下排列的两个按钮间添加垂直多点分隔？

要在上下排列的两个按钮之间添加竖排的多点分隔线，结合你的现有代码，推荐以下几种实现方案：

方案一：CSS径向渐变伪元素（最灵活） #

通过给按钮所在容器添加伪元素，用径向渐变生成重复圆点，形成竖线效果：

修改后的CSS #

/* 给每个按钮容器添加定位 */
.asset-item {
  position: relative;
  margin-bottom: 120px; /* 将原button的margin-bottom移到容器上，统一控制间距 */
}

/* 给非最后一个容器添加垂直分隔线 */
.asset-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 18px; /* 调整到按钮右侧的位置，和按钮对齐 */
  top: 40px; /* 从按钮下方开始绘制 */
  bottom: -80px; /* 控制分隔线长度，对应容器的margin-bottom减去顶部偏移 */
  width: 2px;
  /* 用径向渐变生成圆点，重复排列 */
  background-image: radial-gradient(circle, #666 2px, transparent 2px);
  background-size: 100% 15px; /* 第一个值控制点的宽度，第二个值控制点的间距 */
}

/* 移除原button的margin-bottom */
button{
  /* margin-bottom:120px; */
}

/* 你的原有样式 */
.asset-detail {
    display: flex;
    flex-direction: column;
    padding:10px;
    line-height:30px;
    border: 1px solid var(--highlight-color-5);
    background:var(--highlight-color-7);
    border-radius:5px;
    position:relative;
}
span {
  font-weight: bold;
  display: inline-block;
  margin-left: 10px;
}

.asset {
    display: flex;
}

.asset-tabs{
    margin-left: 10px;
}
.toggle{
    cursor: pointer;
    font-size: 20px;
    margin-bottom: 15px;
    float: left;
}
.wrapper{
    float: right;
    margin-left: 30px;
    width: 90%;
}
.textarea{
    resize: none;
    width:90%;
}
ul{
    padding: 0;
    margin: 0;
    li{
        list-style-type: none;
        margin-left: 5px;
        cursor: pointer;
    }
    &:hover{
        opacity: 0.7;
    }
}

修改后的HTML #

给每个按钮所在的外层div添加asset-item类：

<div class="asset-item">
  <button>+</button>
  <span class="toggle" ><i class="fa-light"></i></span>
  <div class="wrapper">
    <div class="row mt-20">
      <div class="col-6">
        <div class="col-24">Created:<span>aaa</span></div>
        <div class="col-24">Created by:<span>bbbb</span></div>
      </div>
      <div class="col-6">
        <div class="col-24"><textarea class="textarea" rows="6" disabled>cccc</textarea></div>
      </div>
    </div>
  </div>
</div>

<div class="asset-item">
  <button>+</button>
  <span class="toggle" ><i class="fa-light"></i></span>
  <div class="wrapper">
    <div class="row mt-20">
      <div class="col-6">
        <div class="col-24">Created:<span>aaa</span></div>
        <div class="col-24">Created by:<span>bbbb</span></div>
      </div>
      <div class="col-6">
        <div class="col-24"><textarea class="textarea" rows="6" disabled>cccc</textarea></div>
      </div>
    </div>
  </div>
</div>

方案二：纯字符实现（最简单） #

直接在两个按钮之间插入竖排的圆点字符，通过flex布局控制间距：

HTML新增部分 #

在两个asset-item之间添加：

<div class="dot-separator">
  <span>·</span>
  <span>·</span>
  <span>·</span>
  <span>·</span>
</div>

新增CSS #

.dot-separator {
  position: absolute;
  left: 18px; /* 和按钮对齐 */
  height: 80px; /* 对应容器的间距 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dot-separator span {
  font-size: 16px;
  color: #666;
  margin: 0;
  font-weight: normal;
}

方案三：SVG实现（精度最高） #

用SVG绘制固定的圆点竖线，适合需要精确控制每个点位置的场景：

HTML新增部分 #

在第一个asset-item后面添加：

<svg class="dot-line" width="4" height="80" viewBox="0 0 4 80">
  <circle cx="2" cy="10" r="2" fill="#666"/>
  <circle cx="2" cy="30" r="2" fill="#666"/>
  <circle cx="2" cy="50" r="2" fill="#666"/>
  <circle cx="2" cy="70" r="2" fill="#666"/>
</svg>

新增CSS #

.dot-line {
  position: absolute;
  left: 18px;
  top: calc(100% - 70px); /* 调整位置和按钮对齐 */
}

内容的提问来源于stack exchange，提问作者None