利用before伪元素创建图标

最新推荐文章于 2023-12-07 16:16:53 发布

笑道三千

最新推荐文章于 2023-12-07 16:16:53 发布

阅读量491

点赞数

分类专栏： # element ui后台管理系列 # CSS3

本文链接：https://blog.csdn.net/weixin_42349568/article/details/115230989

版权

element ui后台管理系列同时被 2 个专栏收录

56 篇文章 5 订阅

订阅专栏

CSS3

12 篇文章 1 订阅

订阅专栏

一，实现效果

在这里插入图片描述

二，实现代码

<template>
  <div class="printItemBox">
      <el-card>
          <div class="title">顶栏</div>
      </el-card>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.printItemBox{
    /deep/.el-card .el-card__body{
        padding: 0;
        .title{
            padding: 8px 0 0 20px;
            position: relative;
            &::before{
                content:'';
                width: 4px;
                height: 20px;
                background: #39475E;
                left: 0;
                position: absolute;
            }
        }
    }
}
</style>