javascript - 這個css怎麼寫

Question

#這個分類類別目的這個圖形 css怎麼寫 我的方法是boder-bottom加上一個相對定位的偽類

有沒有好的思路

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就可以復用了～～