.tree img {
  vertical-align: middle;
}

.tree li {
  list-style-type: none;
  position: relative;
}

.tree li::before {
  content: "";
  position: absolute;
  top: -7px;
  left: -20px;
  border-left: 0.5px solid #555; /* líneas del árbol */
  border-bottom: 0.5px solid #555; /* líneas del árbol */
  width: 20px;
  height: 15px;
}

.tree li::after {
  position: absolute;
  content: "";
  top: 8px;
  left: -20px;
  border-left: 0.5px solid #555; /* líneas del árbol */
  border-top: 0.5px solid #555; /* líneas del árbol */
  width: 20px;
  height: 100%;
}


.tree li:last-child::after {
  display: none;
}

.tree li:last-child:before {
  border-radius: 0 0 0 5px;
}

ul.tree > li:first-child::before {
  display: none;
}

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