Django+LESS开发家谱如何裁剪li的::before伪元素连线至人物节点

解决方法 #

你的问题核心是横向连线绑定在宽度不统一的<li>元素上，导致连线长度随<li>宽度变化无法对齐人物节点。只需要调整LESS中横向连线的渲染逻辑，将连线从子<li>转移到父级.generation容器绘制即可，修改代码如下：

1. 移除原有.generation > li::before相关的所有定义，替换为以下代码：

/* 原有.generation类保留，新增如下逻辑 */
.generation{
  position: relative;
  &::before{
    content: '';
    position: absolute;
    top: -6px;
    /* 左右偏移量对齐人物节点中心：person左/右margin20px + 人物宽度的一半25px = 45px */
    left: 45px;
    right: 45px;
    border-top: 1px solid #fff;
  }
  /* 隐藏原来单个li上的横向连线 */
  > li::before{
    display: none!important;
  }
}
/* 第一代不需要顶部连线 */
.gen_1.generation::before{
  display: none;
}
/* 处理单个人物的代级，不需要横向连线 */
.generation > li:only-child::before{
  display: none;
}

2. 可删除原有冗余的测试代码：

/* 可直接删除这段 */
.generation > li:first-child{
  &::before{
      border:1px solid red;
      left:25%;
  }
}

修改后所有代的横向连线会自动适配当前代首尾人物的中心位置，不受<li>宽度变化的影响，刚好对齐人物的垂直连线。

内容的提问来源于stack exchange，提问作者Михаил Зубов