利用border以及:after實(shí)現(xiàn), 為了觀看效果方便，以下demo線條寬度設(shè)定為2px. 
在線預(yù)覽

html >>>>>>

<div class='treeline'></div>

css >>>>>>

.treeline {

  display: inline-block;

  width: 100px;

  height: 26px;

  padding: 12px 0;

  box-sizing: border-box;

  border-left: 2px solid #888;

}

.treeline:after {

  content: '';

  display: block;

  width: 100%;

  height: 100%;

  background: #888;

}