如何在HTML/CSS中创建并仅向上延伸的垂直线？

要实现仅向上延伸、且刚好覆盖第一个到最后一个图标区域的垂直线，可按以下步骤调整CSS及逻辑：

1. 确保父容器为相对定位 #

绝对定位的垂直线需要以相对定位的父容器为参考，避免定位偏移：

/* 垂直线的父容器 */
.parent-container {
  position: relative;
}

2. 修改垂直线的CSS配置 #

调整定位属性，固定下端位置（不低于最后一个图标），同时上端延伸至第一个图标：

.vertical-line {
  position: absolute;
  width: 1px;
  background-color: black;
  z-index: 1;
  left: calc(50px / 2); /* 保留原水平位置 */
  bottom: 33px; /* 固定在最后一个图标的位置，禁止向下延伸 */
  top: 1px; /* 向上延伸至第一个图标位置，可根据实际图标位置调整数值 */
  /* 移除height: auto，top+bottom会自动计算线的高度 */
}

3. 动态适配第一个图标的位置（可选） #

如果第一个图标的位置不固定（比如MUIx数据网格行高度变化），可以用JS动态获取其位置并设置线的top值：

const firstIcon = document.querySelector('.your-first-icon-selector');
const verticalLine = document.querySelector('.vertical-line');

if (firstIcon && verticalLine) {
  // 获取第一个图标相对于父容器的顶部偏移量
  const iconTopOffset = firstIcon.offsetTop;
  verticalLine.style.top = `${iconTopOffset}px`;
}

核心逻辑说明 #

通过bottom固定垂直线的下端（不超过最后一个图标），top定义上端的终止位置（第一个图标处），这样线只会在两个点之间向上延伸，不会出现双向拉伸的情况。

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