使用CSS或JS在行尾显示带有点的树列表

Question

我希望使用CSS在HTML页面上显示类似的内容：

我目前使用此代码：

＆＃13;

＆＃13;

.tree,
.tree ul {
  margin:0 0 0 1em; /* indentation */
  padding:0;
  list-style:none;
  color:#1f1f1f;
  position:relative;
}

.tree ul {margin-left:.5em} 

.tree:before,
.tree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid;
}

.tree li {
  margin:0;
  padding:0 1.5em; /* indentation + .5em */
  line-height:2em; /* default list item's `line-height` */
  font-weight:bold;
  position:relative;
}

.tree li:before {
  content:"";
  display:block;
  width:10px; /* same with indentation */
  height:0;
  border-top:1px solid;
  margin-top:-1px; /* border top width */
  position:absolute;
  top:1em; /* (line-height/2) */
  left:0;
}

.tree li:last-child:before {
  background:#fff; /* same with body background */
  height:auto;
  top:1em; /* (line-height/2) */
  bottom:0;
}

＆＃13;

<ul class="tree">
  <li>Bad Credit/No Credit</li>
  <li>Bankruptcy</li>
  <li>Repossession</li>
  <li>Consumer Proposal</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

我怎么能这样做并且可能？

Answer 1

您可以使用:after伪元素来保存点：

.tree li:after {
  content: "\2022";   /* bullet code */
  position: absolute;
  left: 9px;
  top: -1px;
}

.tree:after {
  content: "\2022";   /* bullet code */
  position: absolute;
  left: -3px;
  top: -8px;
}

＆＃13;

＆＃13;

.tree,
.tree ul {
  margin:0 0 0 1em; /* indentation */
  padding:0;
  list-style:none;
  color:#1f1f1f;
  position:relative;
}

.tree ul {margin-left:.5em} 

.tree:before,
.tree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid;
}

.tree li {
  margin:0;
  padding:0 1.5em; /* indentation + .5em */
  line-height:2em; /* default list item's `line-height` */
  font-weight:bold;
  position:relative;
}

.tree li:before {
  content:"";
  display:block;
  width:10px; /* same with indentation */
  height:0;
  border-top:1px solid;
  margin-top:-1px; /* border top width */
  position:absolute;
  top:1em; /* (line-height/2) */
  left:0;
}

.tree li:last-child:before {
  background:#fff; /* same with body background */
  height:auto;
  top:1em; /* (line-height/2) */
  bottom:0;
}

.tree li:after {
  content: "\2022";   /* bullet */
  position: absolute;
  left: 9px;
  top: -1px;
}

.tree:after {
  content: "\2022";   /* bullet */
  position: absolute;
  left: -3px;
  top: -8px;
}

＆＃13;

<ul class="tree">
  <li>Bad Credit/No Credit</li>
  <li>Bankruptcy</li>
  <li>Repossession</li>
  <li>Consumer Proposal</li>
</ul>

＆＃13;

＆＃13;

＆＃13;