Javascript – Wie schreibe ich dieses CSS?

Question

Wie schreibe ich CSS für diese Grafik dieser Klassifizierungskategorie? Meine Methode besteht darin, eine relativ positionierte Pseudoklasse zu boder-bottom hinzuzufügen

Habt ihr gute Ideen

Answer 1

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

html >>>>>>

<p class='treeline'></p> 

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;
}

Answer 2

竖线用border,横线用before

    .list-ui{
      position: relative;
      margin-left: 5px;
      padding-left: 45px;
      border-left: 1px solid #ccc;
    }
    .list-ui:before{
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -0.5px;
      content: '';
      display: block;
      width: 40px;
      height: 1px;
      background: #ccc;
    }

Answer 3

我有个大胆的想法~,用::before 和 ::after组在一起

Answer 4

声明一个class border写一条横线 在用伪类写个横线然后旋转90度 移动下位置 完事
然后这个class就可以复用了～～