【css】纵向步骤条竖线的实现--css伪类

近期做H5开发，需要实现一个自定义步骤条，记录一下竖线的实现

其实很简单 步骤条dome结构如下：

 <div class="toCard">
      <div class="toCard-content">
        <div class="toCard-content-l">1</div>
        <div class="toCard-content-r">
          <div class="tocardtop">{
   
   { question.title }}</div>
          <div class="tocardbottom">
            <van-radio-group v-model="radio">
              <van-radio v-for="item in answerList" :key="item.id" :name="item.score" checked-color="rgb(0,170,198)">{
   
   { item.answer }}</van-radio>
            </van-radio-group>
          </div>
        </div>
      </div>
    </div>

css样式如下

.toCard {
    
    
  min-height: 5rem;
  background: #fff;
  // border-radius: 1rem 1rem 0 0;
  border-radius: 1rem;
  position: relative;
  top: -1rem;
  padding: 0.9rem 0.5rem;
  &-content {
    
    
    display: flex;
    &-l {
    
    
      display: flex;
      align-items: center;
      justify-content: center;
      width: 72px;
      height: 72px;
      background: #00aac6;
      border-radius: 48px;
      font-size: 0.5rem;
      color: #ffff;
    }
    &-r {
    
    
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 85%;
      text-align: left;
      .tocardtop{
    
     /*这里做了文字超出省略*/
        min-height: 1rem;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /*行数*/
        overflow: hidden;
        padding: 0 0.45rem;
        font-size: .4rem;
        font-weight: 600;
      }
      .tocardbottom {
    
    
        background: rgba(87, 207, 227, 0.08);
        display: flex;
        font-size: .4rem;
        padding: .4rem .25rem 0;
        .van-radio{
    
    
          padding-bottom: .4rem;
        }
        /deep/ .van-radio__label{
    
    
          color: #05A0A8;
          font-weight: 500;
        }
      }
    }
    &::before {
    
    
      content: "";
      border-left: 2px solid rgb(229,246,249);
      position: absolute;
      left: 1rem;
      height: 100%;
      height: 70%;
      top: 1.9rem;
    }
  }
}

css也比较简单主要是flex布局和伪类的样式实现

完美~