删除树视图内的垂直线

Question

尝试用html和css树视图实现树视图并按预期工作，但是ul展开时的垂直线无法删除，

li里面的延长线需要去掉

我附上了下面的html和css代码。我试过使用伪元素和伪元素最后一个孩子和第 n 个孩子，但该行没有删除

<ul class="tree">
  <li>
    <details open>
      <summary>Giant planets</summary>
      <ul>
        <li>
          <details>
            <summary>Gas giants</summary>
            <ul>
              <li>Jupiter</li>
              <li>Saturn</li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary>Ice giants</summary>
            <ul>
              <li>Uranus</li>
              <li>Neptune</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
</ul>

这是 ul li html 元素的示例结构

我还附上了CSS属性

.tree{
    --spacing : 1.5rem;
    --radius  : 10px;
  }
  
  .tree li{
    display      : block;
    position     : relative;
    padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
  }
  
  .tree ul{
    margin-left  : calc(var(--radius) - var(--spacing));
    padding-left : 0;
  }
  
  .tree ul li {
    border-left : 2px solid #ddd;
  }
  
  .tree ul li:last-child{
    border-color : transparent;
  }
  
  .tree ul li::before{
    content      : '';
    display      : block;
    position     : absolute;
    top          : calc(var(--spacing) / -2);
    left         : -2px;
    width        : calc(var(--spacing) + 2px);
    height       : calc(var(--spacing) + 1px);
    border       : solid #ddd;
    border-width : 0 0 2px 2px;
  }
  
  .tree summary{
    display : block;
    cursor  : pointer;
  }
  
  .tree summary::marker,
  .tree summary::after{
display:none
  }

  .tree summary::after,
  .tree li ::after {
    display: none;
  }

  .tree summary::marker,
  .tree summary::-webkit-details-marker{
    display : none;
  } 
  
  .tree summary:focus{
    outline : none;
  }
  
  .tree summary:focus-visible{
    outline : 1px dotted #000;
  }
  
  .tree li::after,
  .tree summary::before{
    display       : block;
    position      : absolute;
    top           : calc(var(--spacing) / 2 - var(--radius));
    left          : calc(var(--spacing) - var(--radius) - 1px);
    width         : calc(2 * var(--radius));
    height        : calc(2 * var(--radius));
    border-radius : 50%;
    background    : #ddd;
  }
  
  .tree summary::before{
    content     : '+';
    z-index     : 1;
    color       : #fff;
    line-height : calc(2 * var(--radius) - 2px);
    text-align  : center;
  }

Answer 1

尝试从您的 css 中删除以下代码

.tree ul li {
  /* border-left: 2px solid #ddd; */ REMOVE THIS
}

.tree ul li::before {
  content: '';
  display: block;
  position: absolute;
  top: calc(var(--spacing) / -2);
  left: -2px;
  width: calc(var(--spacing) + 2px);
  height: calc(var(--spacing) + 1px);
  /* border: solid #ddd; */ REMOVE THIS
  border-width: 0 0 2px 2px;
}

这是一个工作示例

.tree {
  --spacing: 1.5rem;
  --radius: 10px;
}

.tree li {
  display: block;
  position: relative;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul {
  margin-left: calc(var(--radius) - var(--spacing));
  padding-left: 0;
}

.tree ul li {
  /* border-left: 2px solid #ddd; */
}

.tree ul li:last-child {
  border-color: transparent;
}

.tree ul li::before {
  content: '';
  display: block;
  position: absolute;
  top: calc(var(--spacing) / -2);
  left: -2px;
  width: calc(var(--spacing) + 2px);
  height: calc(var(--spacing) + 1px);
  /* border: solid #ddd; */
  border-width: 0 0 2px 2px;
}

.tree summary {
  display: block;
  cursor: pointer;
}

.tree summary::marker,
.tree summary::after {
  display: none;
}

.tree summary::after,
.tree li ::after {
  display: none;
}

.tree summary::marker,
.tree summary::-webkit-details-marker {
  display: none;
}

.tree summary:focus {
  outline: none;
}

.tree summary:focus-visible {
  outline: 1px dotted #000;
}

.tree li::after,
.tree summary::before {
  display: block;
  position: absolute;
  top: calc(var(--spacing) / 2 - var(--radius));
  left: calc(var(--spacing) - var(--radius) - 1px);
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  border-radius: 50%;
  background: #ddd;
}

.tree summary::before {
  content: '+';
  z-index: 1;
  color: #fff;
  line-height: calc(2 * var(--radius) - 2px);
  text-align: center;
}

<ul class="tree">
      <li>
        <details open>
          <summary>Giant planets</summary>
          <ul>
            <li>
              <details>
                <summary>Gas giants</summary>
                <ul>
                  <li>Jupiter</li>
                  <li>Saturn</li>
                </ul>
              </details>
            </li>
            <li>
              <details>
                <summary>Ice giants</summary>
                <ul>
                  <li>Uranus</li>
                  <li>Neptune</li>
                </ul>
              </details>
            </li>
          </ul>
        </details>
      </li>
    </ul>

希望对您有所帮助！