修复左侧导航顶级菜单项hover时红色条占满页面高度的问题

问题场景 #

开发左侧导航时，设置鼠标悬停菜单项时左侧显示红色条。目前Home项及其子项表现正常，但其他无下拉子菜单的顶级菜单项hover时，红色条会拉伸至整个页面高度，需要调整使其仅覆盖对应菜单项的实际高度。

问题原因 #

当前红色条的伪元素::before是基于顶级菜单项的<li>元素（已设置position:relative）进行绝对定位的。对于没有下拉子菜单的<li>，其高度未被内容充分约束，导致top:0; bottom:0的定位规则让红色条撑满整个页面高度。正确的做法是让伪元素基于菜单项的<a>标签本身定位，确保红色条仅匹配<a>的高度。

修复方案 #

步骤1：给顶级菜单项的<a>标签添加相对定位 #

让伪元素以<a>为基准定位，替换原有的以<li>为基准的逻辑：

.left-bar .top-level-item [href] {
  position: relative;
}

步骤2：调整伪元素的定位规则 #

将伪元素的高度设置为100%（匹配<a>的高度），替代原有的top:0; bottom:0，避免因父元素高度不确定导致的拉伸问题：

.left-bar .top-level-item [href]:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background-color: red;
}

完整修复后的CSS代码 #

.vertical.dropdown.menu [href] > i {
  display: block;
}

.vertical.dropdown.menu [href] {
  display: block;
  text-align: center;
}

.left-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 150px;
  height: 100%;
  color: #333;
  background: #FFFFFF;
}

.left-bar .vertical.menu.nested {
  padding: 0;
}

.left-bar [href] > i {
  display: block;
}

.left-bar [href] {
  display: block;
  text-align: left;
  padding: 0;
  color: #333;
}

.left-bar [href]:hover {
  background: #9B9B9BFF;
}

.left-bar .vertical.menu > li {
  position: relative;
  background: #FFFFFF;
  color: #333;
  border: 0;
}

/* 新增：给顶级菜单项的a标签设置相对定位 */
.left-bar .top-level-item [href] {
  position: relative;
}

/* 调整伪元素定位规则 */
.left-bar .top-level-item [href]:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background-color: red;
}

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