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

前端小白记录

已于 2024-04-29 16:49:52 修改

阅读量537

点赞数 3

文章标签：前端 vue.js elementui

于 2024-04-29 16:43:07 首次发布

本文链接：https://blog.csdn.net/m0_50981596/article/details/138317763

版权

本文介绍了如何在Vue.js项目中，通过HTML和CSS样式创建一个可以自定义上方和下方文字的长箭头效果，利用`el-divider`组件和CSS属性来实现动态设计。

摘要由CSDN通过智能技术生成

项目场景：

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

代码描述

 <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>