css 元素前后添加图标(::before 和 ::after 的妙用)

在这里插入图片描述

<template>
  <div class="container">
    <div class="label">猜你喜欢</div>
  </div>
</template>

<style lang="scss" scoped>
.label {
     
  display: flex;
  &::before,
  &::after {
     
    content: "";
    width: 20px;
    height: 20px;
    background-image: url(./bubble.png);
    background-size: contain;
    margin: -2px 10px;
  }
}
.container {
     
  margin: 30px;
}
</style>

相关推荐

  1. linux | && &

    2023-12-12 02:46:02       18 阅读
  2. CSS元素伪类区别

    2023-12-12 02:46:02       17 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-12 02:46:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-12 02:46:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-12 02:46:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-12 02:46:02       18 阅读

热门阅读

  1. 【Rust】第一节:安装

    2023-12-12 02:46:02       33 阅读
  2. springboot中优雅实现异常拦截和返回统一结构数据

    2023-12-12 02:46:02       35 阅读
  3. 代码随想录 96. 不同的二叉搜索树

    2023-12-12 02:46:02       38 阅读
  4. c++中function和lambda函数的学习

    2023-12-12 02:46:02       41 阅读
  5. 地牢手册-3d

    2023-12-12 02:46:02       40 阅读
  6. 从Makefile生成compile_commands.json

    2023-12-12 02:46:02       37 阅读
  7. android快速网络请求之android-networking

    2023-12-12 02:46:02       35 阅读
  8. Springboot实现配置多数据源

    2023-12-12 02:46:02       39 阅读
  9. LightDB - datediff 函数增强[mysql兼容]

    2023-12-12 02:46:02       33 阅读
  10. K8S学习指南(5)-k8s核心对象namespace

    2023-12-12 02:46:02       39 阅读
  11. 如何避免多线程导致的数据库重复数据问题

    2023-12-12 02:46:02       37 阅读
  12. 日常开发日志

    2023-12-12 02:46:02       40 阅读