Question 43731 in Html Question posted in
Some basic documentation can be found here.

removing horizontal and vertical lines inside the li – Html

i have been trying to remove the horizontal and vertical lines nearby child but cannot able to achieve it.it would be helpful as i have been trying it for more than a day

i have attached the js fiddle for referenceneeed to remove the blue horizontal and vertical line nearby line to be removed. i cannot able to remove the lines inside the parent.i have been using pseudo elements and classes but cannot able to achieve it

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 */
  }
Tags:

2

Answers


  1. 0

    .tree > li to target only child of the classe .tree

    Login or Signup to reply.
  2. 0

    – Edited –

    Demo code

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search