elementui 标题加:before+行尾按钮模板

1.效果

2.代码实现

<div class="head">
        <span class="spanFlag">测试标题</span>
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          class="insertBtn"
          @click="addForm"
          >添加表单</el-button
        >
      </div>

//css
   .head {
         background: #fff;
         padding: 0 24px;
    display: flex;
    height: 50px;
    align-items: center;
    // padding-left: 25px;
    // padding-right: 25px;
    justify-content: space-between;
    margin-bottom: 24px;

    span {
      position: relative;
      // display: inline-block;
      height: 50px;
      padding-left: 20px;
      line-height: 50px;
      font-size: 18px;
      font-weight: bold;
    }
    span::before {
      content: "";
      position: absolute;
      width: 6px;
      height: 16px;
      background: linear-gradient(180deg, #0696e1, #0064cb);
      top: 17px;
      left: 0;
    }
    .insertBtn {
      height: 32px;
      background-color: #0064cb;
      border-color: #0064cb;
    }
    .insertBtn:hover {
      opacity: 0.8;
    }
  }