vue+element-ui实现横向长箭头，横向线上下可自定义文字(使用after伪元素实现箭头)

项目场景：

需要实现一个长箭头，横向线上下可自定义文字

代码描述

 <div>
        <span class="data-model">{{ //上方文字}}</span>
        <el-divider class="q"> </el-divider>//分隔线
        <span class="data-model">{{//下方文字}}</span></div
      >

<style>
   .data-model {
      display: inline-block;
      width: 100%;
      text-align: center;
    }
    .el-divider {
      position: relative;
      margin: 8px 0;
      background: #4162ff;
    }
    .el-divider::after {
      content: '>';
      position: absolute;
      right: 12px;
      top: 0;
      transform: translateY(-52%);
      width: 0;
      color: #4162ff;
      font-size: 22px;
    }
</style>

实现效果：