.treeHTML {
  line-height: normal;
}
.treeHTML details {
  display: block;
}
.treeHTML div {
  position: relative;
  margin: 0 0 0 .5em;
  padding: 0 0 0 1.2em;
}
.treeHTML div:not(:last-child) { /* необязательно */
  border-left: 1px solid #ccc;
}
.treeHTML div:before { /* необязательно */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.1em;
  height: .5em;
  border-bottom: 1px solid #ccc;
}
.treeHTML div:last-child:before { /* необязательно */
  border-left: 1px solid #ccc;
}
.treeHTML summary { /* стилями можно задать любую форму, например, тот же плюс. Я специально не стала усложнять, чтобы можно было проще разобраться в коде */
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
.treeHTML details[open] summary { /* убрать рамку при фокусе */
  outline: none;
}
.treeHTML summary {
position: absolute;
left: -.5em;
top: .4em;
width: .9em;
height: .9em;
line-height: .9em;
text-align: center;
background: #fff;
font-size: 80%;
cursor: pointer;
}
.treeHTML summary:before {
content: "✚";
}

.treeHTML details[open] summary:before {
content: "▼";
}
.treeHTML summary::-webkit-details-marker {
display: none
}
.treeHTML div a:hover {text-decoration: underline;}
.treeHTML {font-size:1.1em;}
.treeHTML div {line-height:1.2em;}