css 删除线内的水平线和垂直线

cygmwpex 于 2023-03-25 发布在其他

关注(0)|答案(2)|浏览(149)

我一直试图删除水平和垂直线附近的孩子，但无法实现it.it将是有帮助的，因为我一直在尝试它超过一天
我已经附加了js fiddle作为参考neeed to remove the blue horizontal and vertical line nearby line to be removed。我不能删除父文件中的行。我一直在使用伪元素和类，但不能实现它
i would like to achieve the tree view like this

.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;
    /* border-color: red */
  }
  
  .tree ul li {
    border-left : 2px solid #ddd;
    /* border-color: red */
  }
  
  .tree ul li:last-child{
    border-color : transparent ;
  }
  
  .tree li {

    border-color: red
  }
  
  
  .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;
    border-color: blue
  }
  
  .tree  li ::after{
/*     border-color: blue
     */  }
  
  .tree summary{
    display : block;
    cursor  : pointer;
  }
  
  .tree summary::marker,
  .tree summary::after{
         display:none;
    border-color : transparent;

  }

  .tree summary::after,
  .tree li ::after {
    /* border-color: red */
  }

  .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;
    /* border-color: red */
  }

css

来源：https://stackoverflow.com/questions/75793945/removing-horizontal-and-vertical-lines-inside-the-li

2条答案

按热度按时间

zxlwwiss1#

.tree〉li只针对classe.tree的子级

赞(0）回复(0）举报 2023-03-25

7cwmlq892#

-编辑-
演示代码

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

.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;
  left          : calc(var(--spacing) - var(--radius));
  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>Main parent</summary>
      <ul >
        <li>
          <details>
            <summary>parent</summary>
            <ul>
              <li >nearby lines rneed to be removed</li>
              <li>nearby lines rneed to be removed</li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary>parent</summary>
            <ul>
              <li>nearby lines rneed to be removed</li>
              <li>nearby lines rneed to be removed</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
  <li>
    <details open>
      <summary>Main parent</summary>
      <ul >
        <li>
          <details>
            <summary>parent</summary>
            <ul>
              <li >nearby lines rneed to be removed</li>
              <li>nearby lines rneed to be removed</li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary>parent</summary>
            <ul>
              <li>nearby lines rneed to be removed</li>
              <li>nearby lines rneed to be removed</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
</ul>

赞(0）回复(0）举报 2023-03-25

我来回答

css 删除线内的水平线和垂直线

2条答案

相关问题

热门标签

最新问答