Hierarchy view - Child lines style.scss

.hv-item-child{
  padding: 0 15px;
  position: relative;

  &:before, &:after{
    content: '';
    position: absolute;
    background-color: $line-color;
    left: 0;
  }

  &:before{
    left: 50%;
    top: 0;
    transform: translateY(-100%);
    width: $line-width;
    height: $bottom-margin / 2;

  }

  &:after{
    top: -$bottom-margin / 2;
    transform: translateY(-100%);
    height: $line-width;
    width: 100%;
  }

  // Make first & last child`s line width 50%
  &:first-child:after{
    left: 50%;
    width: 50%;
  }

  &:last-child:after{
    width: calc(50% + 1px);
  }        

}