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

news2024/10/2 22:03:55

在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1293530.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Leetcode—290.单词规律【简单】

2023每日刷题&#xff08;五十一&#xff09; Leetcode—290.单词规律 实现代码 class Solution { public:bool wordPattern(string pattern, string s) {unordered_map<char, string> m1;unordered_map<string, char> m2;stringstream stro(s);string tmp;for(a…

Anisble中剧本的应用

1.什么是playbook及playbook的组成 1. Playbook 的功能 playbook 是由一个或多个 play 组成的列表 Playboot 文件使用 YAML 来写的 2. YAML 简介&#xff1a; 是一种表达资料序列的格式 &#xff0c; 类似 XML Yet Another Markup Language 3. 特点 可读性好 和脚本语言…

Remix IDE 快速开始Starknet

文章目录 一、Remix 项目二、基于Web的开发环境Remix 在线 IDE三、Starknet Remix 插件如何使用使用 Remix【重要】通过 Starknet by Example 学习一、Remix 项目 Remix 项目网站 在以太坊合约开发领域,Remix 项目享有很高的声誉,为各个级别的开发人员提供功能丰富的工具集…

NOIP2014提高组第二轮day1 - T3:飞扬的小鸟

#题目链接 [NOIP2014 提高组] 飞扬的小鸟 题目描述 Flappy Bird 是一款风靡一时的休闲手机游戏。玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度&#xff0c;让小鸟顺利通过画面右方的管道缝隙。如果小鸟一不小心撞到了水管或者掉在地上的话&#xff0c;便宣告失败…

智能优化算法应用:基于材料生成算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于材料生成算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于材料生成算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.材料生成算法4.实验参数设定5.算法结果6.参考…

vuepress路径问题,导致图片不显示

图片不显示&#xff0c;报 Uncaught SyntaxError: Unexpected token <错误 很可能就是&#xff1a;路径配置原因 1.当设置为 / 时&#xff0c;VuePress 会假设你的站点将部署到服务器的根路径&#xff0c; 例如 https://yourdomain.com/。 2.生成的页面链接和资源引用将以…

国科大超大规模集成电路设计针对期末考试的复习

基本概念 物理综合Physical synthesis 从RTL代码创建正确的布局布线电路,相当于跳过了逻辑门级表示&#xff0c;直接从数据流阶段到了版图阶段。 等效门equivalent gate 一个等效门是指一个二输入的与非门&#xff0c;这里的等效不是指功能上的等效&#xff0c;而是芯片面积…

创建vue项目:vue脚手架安装、vue-cli安装,vue ui界面创建vue工程(vue2/vue3),安装vue、搭建vue项目开发环境(保姆级教程二)

今天讲解 Windows 如何利用脚手架创建 vue 工程&#xff0c;以及 vue ui 图形化界面搭建 vue 开发环境&#xff0c;这是这个系列的第二章&#xff0c;有什么问题请留言&#xff0c;请点赞收藏&#xff01;&#xff01;&#xff01; 文章目录 1、安装vue-cli脚手架2、vue ui创建…

2022年第十一届数学建模国际赛小美赛D题野生动物贸易是否应长期禁止解题全过程文档及程序

2022年第十一届数学建模国际赛小美赛 D题 野生动物贸易是否应长期禁止 原题再现&#xff1a; 野生动物市场被怀疑是此次疫情和2002年SARS疫情的源头&#xff0c;食用野生肉类被认为是非洲埃博拉病毒的一个来源。在冠状病毒爆发后&#xff0c;中国最高立法机构永久性地加强了野…

总结一篇本地idea配合阿里云服务器使用docker

idea打包打镜像发到阿里云服务器 先说一下使用docker desktop软件怎么使用 1.下载docker desktop官网&#xff0c;先注册个账号吧&#xff0c;后面桌面软件登录会用到&#xff08;当然&#xff0c;配合这个软件使用需要科学上网&#xff09; 安装这个要配合wsl使用&#xf…

Python实现的二叉树的先序、中序、后序遍历示例

一、先序、中序、后序遍历的次序&#xff1a; 创建好一棵二叉树后&#xff0c;可以按照一定的顺序对树中所有的元素进行遍历。按照先左后右&#xff0c;树 的遍历方法有三种&#xff1a;先序遍历、中序遍历和后序遍历。 其中&#xff0c;先序遍历的次序是&#xff1a;如果二叉…

HarmonyOS4.0从零开始的开发教程09页签切换

HarmonyOS&#xff08;七&#xff09;页签切换 List组件和Grid组件的使用 Tabs组件的使用 概述 在我们常用的应用中&#xff0c;经常会有视图内容切换的场景&#xff0c;来展示更加丰富的内容。比如下面这个页面&#xff0c;点击底部的页签的选项&#xff0c;可以实现“首页…

【Python】np.save()和np.load()函数详解和示例

本文通过函数原理和运行示例&#xff0c;对np.save()和np.load()函数进行详解&#xff0c;以帮助大家理解和使用。 更多Numpy函数详解和示例&#xff0c;可参考 【Python】Numpy库近50个常用函数详解和示例&#xff0c;可作为工具手册使用 目录 np.save &#xff08;&#xff…

异想天开 | 如何实现PXE可视化?批量主机PXE如何监控状态?

这个问题源于早几年前印象比较深刻的面试&#xff0c;面的岗位是UCloud的CDN运维交付岗&#xff0c;当时面试官问我&#xff0c;在批量PXE的时候怎么才能快速确认是否已经PXE成功了&#xff1f;我当时的回答是可以看dhcp服务器分配的地址数量来确定。我已经忘记了为什么我会说出…

Anaconda安装教程及多次安装失败原因

Anaconda下载网址 本教程包含两部分&#xff1a;安装教程和多次安装Anaconda导致的失败原因分析 Anaconda安装包官网下载链接 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b5be0deb0aef4a81a594df79ddc1cc96.png#pic_center 安装 按以下步骤安装 红色波浪…

canvas绘制矩形和线

实现代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdev…

小马识途营销顾问谈如何做好网络口碑营销?

俗话说酒香不怕巷子深&#xff0c;酒香自然有一定的优势&#xff0c;但小马识途营销顾问认为&#xff0c;面对众多的产品&#xff0c;稀有性并不那么容易&#xff0c;酒香也怕巷子深&#xff0c;赢得自己的品牌口碑&#xff0c;获取客户的信任度。才能让企业在市场竞争中长期立…

codeforces E - Good Triples

分析 易得总和总是大于等于每一位之和。如果左边的每一位之和有进位那么对于两边总和的贡献不影响&#xff0c;对于左边的位之和不影响&#xff0c;对于右边的位之和有影响。有进位相当于左边位之和加 10 10 10 &#xff0c;右边位之和加 1 1 1 。两边贡献不等&#xff0c;所…

决战排序之巅(一)

决战排序之巅 插入排序直接插入排序 void InsertSort(int* arr, int n)希尔排序 void ShellSort(int* arr, int n)测试插入排序测试函数 void verify(int* arr, int n)测试 InsertSort测试 ShellSort测试速度 InsertSort & ShellSort 选择排序直接选择排序 void SelectSort…

springboot3.0更新后,idea创建springboot2.x项目

springboot3.0更新后&#xff0c;idea创建springboot2.x项目 点击以下红色框中的按钮 出现了如下图所示&#xff1a; 到这里我们发现没有jdk8的版本&#xff0c;不要慌&#xff0c;我们可以先在这里选择21&#xff0c;然后进入到真正的项目中手动去修改这个jdk的版本&#xff0…