这个css怎么写

Question

这个分类类目的这个图形 css怎么写 我的方法是boder-bottom加一个相对定位的伪类有没有好的思路

Answer 1

利用border以及:after实现, 为了观看效果方便，以下demo线条宽度设定为2px. 
在线预览

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;

}