如何给侧边栏链接列表添加连接列表标题与下级列表的竖线

第一步：修正HTML语义结构 #

你原有的HTML存在语法错误：li标签必须是ul/ol的直接子元素，不能单独裸露在外，调整后的合规结构如下：

<!-- 侧边栏外层容器 -->
<div class="sidebar" style="background: #2d3748; min-height: 100vh; padding: 30px 0 0 50px; color: #fff;">
  <div class="menu-header">
    <b>Menu Principal</b>
  </div>

  <!-- 一级菜单列表 -->
  <ul class="sidebar-menu">
    <li class="active opened has-sub" style="margin-top: 25px;">
      <a routerLink="/Construction-data">
        <i class="entypo-gauge"></i>
        <span class="title">Base de Données</span>
      </a>
      <!-- 二级菜单统一放在父级li内部 -->
      <ul class="sub-menu visible">
        <li class="active">
          <a routerLink="/Construction-data">
            <span class="title">Conception</span>
          </a>
        </li>
        <li>
          <a routerLink="/construction">
            <span class="title">Construction</span>
          </a>
        </li>
        <li>
          <a routerLink="/Exploitation-data">
            <span class="title">Exploitation</span>
          </a>
        </li>
      </ul>
    </li>
    <!-- 其他一级菜单项可在此处继续添加 -->
  </ul>
</div>

第二步：添加CSS实现连接竖线效果 #

通过伪元素实现竖线和节点标记，样式代码如下：

/* 清除列表默认样式 */
.sidebar-menu, .sub-menu {
  list-style: none;
  padding-left: 20px;
  margin: 0;
  position: relative;
}
.has-sub {
  position: relative;
}
/* 核心竖线：从父级标题下方延伸到最后一个子项底部 */
.has-sub::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 24px; /* 可根据你的标题行高调整起始位置 */
  bottom: 10px; /* 可根据子项总高度调整结束位置 */
  width: 1px;
  background: #cbd5e0; /* 竖线默认颜色，可自行修改 */
}
/* 子项前的短横线和圆点 */
.sub-menu li {
  position: relative;
  padding: 8px 0;
}
.sub-menu li::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 16px;
  width: 10px; /* 短横线长度，可调整 */
  height: 1px;
  background: #cbd5e0;
}
.sub-menu li::after {
  content: '';
  position: absolute;
  left: -15px;
  top: 12px;
  width: 6px; /* 圆点大小，可调整 */
  height: 6px;
  border-radius: 50%;
  background: #cbd5e0;
}
/* 激活状态样式区分 */
.sub-menu li.active::after,
.sub-menu li.active::before,
.has-sub.active::before {
  background: #4299e1; /* 激活态颜色，可自行修改 */
}

可调参数说明 #

• 竖线的位置、长度可通过调整对应伪元素的left、top、bottom数值适配你的布局
• 颜色、圆点大小、横线长度都可以根据设计风格自由修改
• 如果存在三级及以上层级的菜单，复制上述逻辑给更深层级的列表添加对应伪元素样式即可

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