使用before伪元素连接div

这个是要显示的效果 在每个list前面添加一个格子 并且用虚线连接起来每个格子

先看HTML结构

<div class="left_list">
	<div class="list_item" v-for="item in roleList" :key="item.id">
        <div class="line">
            -
        </div>
        <div
          class="item_name"
          @click="clickItem(item)"
        >
        	{{item.name}}
        </div>
        <div class="item_icon">
          <span>
            <i class="el-icon-edit"></i>
          </span>
          <span>
            <i class="el-icon-remove-outline"></i>
          </span>
        </div>
	</div>
</div>

css代码
这里主要是使用给item_name添加before 以边框的方式显示 然后通过消除第一个item_name的before去除最上面一条突出的虚线 就可以实现连线了

.list_item {
        line-height: normal;
        display: flex;
        align-items: center;
        color: #989898;
        .line {
                width: 10px;
                height: 10px;
                border: 1px solid #989898;
                display: flex;
                justify-content: center;
                align-items: center;
        }
        .item_name {
                width: 80%;
                padding: 10px;
                cursor: pointer;
                border-radius: 5px;
                display: flex;
                align-items: center;
                position: relative;
                &:hover {
                  background-color: #e6f7ff;
                  color: #333;
                }
                &::before {
                  content: "";
                  position: absolute;
                  border: 1px dashed #989898;
                  width: 0;
                  height: 30px;
                  top: -15px;
                  left: -5px;
                }
        }
        &:first-child {
                .item_name::before {
                  display: none;
                }
        }
        .item_icon {
                width: 20%;
                text-align: right;
                span {
                  i:hover {
                    color: #66b1ff;
                  }
                }
              }      
}