BookmarkTree.css

/**
 * Css tree structure
 *
 * ref: https://two-wrongs.com/draw-a-tree-structure-with-only-css
 */
.tree, .tree ul, .tree li {
  position: relative;
}

.tree ul {
 list-style: none;
 padding-left: 32px;
}

.tree li::before, .tree li::after {
 content: "";
 position: absolute;
 left: -10px;
}

.tree li::before {
 border-top: 1px solid #ddd;
 top: 12px;
 width: 8px;
 height: 0;
}

.tree li::after {
 border-left: 1px solid #ddd;
 height: 100%;
 width: 0px;
 top: 2px;
}
.tree ul > li:last-child::after {
 height: 10px;
}

.tree span {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.tree span::before {
  content: "\2610";
  color: #ddd;
  display: inline-block;
  margin-right: 6px;
}

.tree .selected::before {
  content: "\2611";
  color: green;
}

/* Workaround for weird checkbox symbol in Chrome, originates from last style "Noto Color Emoji" */
:root{
  --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}