如何保持伪选择器 ::before 的动态高度？

Posted 2023-02-22

【中文标题】如何保持伪选择器 ::before 的动态高度？

【英文标题】：How to maintain a dynamic height of the pseudo selector ::before?

【发布时间】：2022-01-12 13:36:25

【问题描述】：

UI 视图有一个手风琴，我需要在手风琴及其子项中显示一些连接器表示，我正在尝试使用 ::before 伪选择器作为父手风琴内的容器，该容器包含所有儿童手风琴。左边的垂直线需要停在圆圈和水平线的最后一个交点处。在第二个示例图像中，表格内的子元素数量也是未知的，我还尝试使用底部属性放置 before 元素。 有什么可以帮助我实现的吗？

 & 
    position: relative;
    margin-left: 2rem;
    padding: 0;
  
  &::before 
    content: '';
    position: absolute;
    top: 0;
    background: #003d76;
    left: 0;
    height: 100%;
    width: 1px;
    display: block;
  

【问题讨论】：

定位在top 和 bottom 是可行的方法，但您需要删除height: 100% 才能工作。

“左边的垂直线需要停在圆圈和水平线的最后一个交点处。” - 如果你的所有列表项都具有相同的已知高度，然后将其计入bottom 值。如果没有，那么你不能这样做，单独使用 CSS。你可以给 each 列表项一个 L 形状的线然后（或更准确地说，从圆圈开始并从那里向上的向上部分），延伸到当前项目的顶部之外，这样它们就会重叠。列表包装器上的溢出：隐藏可以防止您看到在整个列表上方延伸的行。

【参考方案1】：

我已经完成了这个挑战，我尝试按照@CBroe 建议的方法进行操作，但是有一些无法避免的依赖项我无法更改。尝试使用::after 选择器并用白色方块隐藏最后一个孩子的额外垂直线。

.subAccordion 
    & 
      position: relative;
      margin-left: 2rem;
      padding: 0;
      overflow: hidden;
    
    &::before 
      content: '';
      position: absolute;
      top: 0;
      background: #003d76;
      left: 2px;
      height: 100%;
      width: 2px;
      display: block;
    
    &:last-child::after 
      content: '';
      display: block;
      position: absolute;
      background: white;
      width: 4%;
      height: 100%;
      top: 51px;
      left: -5px;