javascript - 這個css怎麼寫

Question

這個分類類目的這個圖形 css怎麼寫 我的方法是boder-bottom加上一個相對定位的偽類 有沒有好的思路

给我你的怀抱 · Answer

利用border以及:after實現, 為了觀看效果方便，以下demo線條寬度設定為2px.
線上預覽

html >>>>>>

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

豎線用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;
    }

PHPz · Answer

我有個大膽的想法~,用::before 和 ::after組在一起

伊谢尔伦 · Answer

聲明一個class border寫一條橫線在用偽類寫個橫線然後旋轉90度移動下位置完事
然後這個class就可以復用了～～