.tree ul {
      padding-top: 20px;
     position: relative;
       display: flex;
     /* justify-content: center;*/
    }

    .tree li {
    list-style-type: none;
     text-align: center;
        position: relative;
      padding: 20px 5px 0 5px;
    }

   .tree li::before, .tree li::after {
      content: '';
      position: absolute;
      top: 0;
      right: 50%;
      border-top: 2px solid #ccc;
      width: 50%;
      height: 20px;
    }

    .tree li::after {
      right: auto;
      left: 50%;
      border-left: 1px solid #ccc;
    }

    .tree li:only-child::before,
    .tree li:only-child::after {
      display: none;
    }

    .tree li:only-child {
      padding-top: 0;
    }

    .tree li:first-child::before,
    .tree li:last-child::after {
      border: none;
    }

    .tree li:last-child::before {
      border-right: 1px solid #ccc;
      border-radius: 0 5px 0 0;
    }

    .tree li:first-child::after {
      border-radius: 5px 0 0 0;
    }

    .tree .node {
      display: inline-block;
      padding: 8px 15px;
      background:royalblue;
      color: white;
      border-radius: 5px;
    }