CSS中使用伪类:before来实现在标签右上角添加“推荐”等字样的斜三角样式

news2024/11/15 15:42:50

在HTML中添加标签并赋上类名“.recommend”即可,如下所示:

<span class="recommend"></span>

css中

.recommend:before {

content: "推荐";
position: absolute;
top: -8px;
right: -26px;
z-index: 1;
padding: 14px 22px 2px;
background-color: #ff9900;
transform: rotate(45deg);
font-size: 12px;
color: #FFFFFF;

}

这样就可以在标签右上角添加带有“推荐”字样的斜三角样式了。

如下图(父级添加position: relative;)
在这里插入图片描述

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

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

相关文章

【嵌入式学习】Qtday03.26

一、思维导图 二、练习 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }void Widget::on_login_btn_clicked() {if(ui->…

STM32CubeIDE基础学习-USART串口通信实验(轮询方式)

STM32CubeIDE基础学习-USART串口通信实验&#xff08;轮询方式&#xff09; 文章目录 STM32CubeIDE基础学习-USART串口通信实验&#xff08;轮询方式&#xff09;前言第1章 硬件介绍第2章 工程配置2.1 工程外设配置部分2.2 生成工程代码部分 第3章 代码编写3.1 串口发送3.1.1 发…

KIOXIA铠侠CM7系列E3.S双端口NVMe2.0 PCIe5.0 SSD KCM71RJE7T68

KIOXIA 铠侠推出的CM7-R E3.S企业级NVMe读密集型企业级固态硬盘&#xff0c;采用PCIe 5.0和NVMe 2.0技术&#xff0c;性能出色&#xff0c;最高可达2,700K IOPS&#xff08;随机读取&#xff09;和310K IOPS&#xff08;随机写入&#xff09;1 DWPD的耐用性和高达15.36 TB的存储…

xmes前端问题,给form表单赋值后,再次从表单拿不到该值

xmes前端&#xff0c;给form表单赋值后&#xff0c;再次从表单拿不到该值&#xff0c;但页面可以展示 赋值 this.$[frm-main].$$([namefilm_num]).value filmNum ; 获取表单的值&#xff0c;这里拿不到之前赋的值 const reqData this.$[frm-main].serializeMyForm(); 原因&…

基于tcp协议的网络通信(将服务端守护进程化)

目录 守护进程化 引入 介绍 如何实现 思路 接口 -- setsid 注意点 实现代码 daemon.hpp log.hpp 运行情况 前情提要 -- 前后台任务介绍(区别命令),sessionsid介绍,session退出后的情况(nuhup,终端进程控制组),任务进程组概念,任务与进程组的关系,-bash介绍-CSDN博客…

深入了解服务器硬件:从基础知识到实际应用

在当今数字化的社会中&#xff0c;服务器扮演着至关重要的角色&#xff0c;它们是支撑互联网、云计算、大数据等技术发展的基石。而理解服务器硬件的基础知识对于从事IT领域的人员来说至关重要。本文将从服务器硬件的基础知识出发&#xff0c;介绍服务器硬件的组成、作用及其在…

Rust使用feature特性和条件编译,以及常用feature使用说明

Cargo Feature 是非常强大的机制&#xff0c;可以为大家提供条件编译和可选依赖的高级特性&#xff0c;可以为你省下不少的代码量来判断操作系统和条件编译等功能。rust官方条件编译文档&#xff1a;Conditional compilation - The Rust Reference features特性 Featuure 可以…

基于nodejs+vue电子产品销售系统设计与实现python-flask-django-php

该系统采用了nodejs技术、express框架&#xff0c;连接MySQL数据库&#xff0c;具有较高的信息传输速率与较强的数据处理能力。包含管理员和用户两个层级的用户角色&#xff0c;系统管理员可以对个人中心、用户管理、产品类别管理、电子产品管理、留言板管理、系统管理、订单管…

【开发篇】七、mybatis的foreach遍历,SQL拼接导致内存溢出

文章目录 1、背景2、快照文件分析3、本地环境复现4、结论5、解决方式 1、背景 文章微服务升级&#xff0c;新增了一个传入文章id的List&#xff0c;判断有多少id是存在的接口&#xff0c;第二天高峰期内存溢出。 2、快照文件分析 打开直方图&#xff0c;发现线程对象占用排第…

11.测试教程-自动化测试selenium-3

文章目录 1.unittest框架解析2.批量执行脚本2.1构建测试套件2.2用例的执行顺序2.3忽略用例执行 3.unittest断言4.HTML报告生成5.异常捕捉与错误截图6.数据驱动 大家好&#xff0c;我是晓星航。今天为大家带来的是 自动化测试selenium第三节 相关的讲解&#xff01;&#x1f600…

强!不用写一行代码!Python最强自动化神器!

1、Playwright介绍 Playwright是一个由Microsoft开发的开源自动化测试工具&#xff0c;它可以用于测试Web应用程序。Playwright支持多种浏览器&#xff0c;包括Chrome、Firefox和WebKit&#xff0c;同时也支持多种编程语言&#xff0c;如JavaScript、TypeScript、Python和C#。…

2014年认证杯SPSSPRO杯数学建模B题(第一阶段)位图的处理算法全过程文档及程序

2014年认证杯SPSSPRO杯数学建模 B题 位图的处理算法 原题再现&#xff1a; 图形&#xff08;或图像&#xff09;在计算机里主要有两种存储和表示方法。矢量图是使用点、直线或多边形等基于数学方程的几何对象来描述图形&#xff0c;位图则使用像素来描述图像。一般来说&#…

【Chrome控制台】application的使用

首先打开调试面板「windows:F12&#xff1b;mac&#xff1a;commandoptioni」&#xff0c;找到Application选项卡。 如下两区域与pwa相关&#xff0c;也就是渐进式web应用程序。 使用前端数据库如websql或IndexDB&#xff0c;可以在如下选项中查看。 数据库详情要到Storage中…

nysm:一款针对红队审计的隐蔽型后渗透安全测试容器

关于nysm nysm是一款针对红队审计的隐蔽型后渗透安全测试容器&#xff0c;该工具主要针对的是eBPF&#xff0c;能够帮助广大红队研究人员在后渗透测试场景下保持eBPF的隐蔽性。 功能特性 随着基于eBPF的安全工具越来越受社区欢迎&#xff0c;nysm也应运而生。该工具能保持各种…

Gitee码云最有价值开源项目之一:CRMEB开源商城系统,全平台、全功能的电商解决方案

一、引言 随着电子商务的快速发展&#xff0c;开源电商系统在行业中扮演着越来越重要的角色。CRMEB开源商城系统作为其中的佼佼者&#xff0c;凭借其强大的功能、卓越的性能和极高的易用性&#xff0c;成为了许多开发者和商家的首选。本文将对CRMEB开源商城系统进行深入的探讨…

Kimi是什么?免费Kimi chat介绍

1. Kimi是什么&#xff1f; Kimi是由月之暗面科技有限公司&#xff08;Moonshot AI&#xff09;开发的人工智能助手&#xff0c;专注于提供高质量的对话和信息处理服务。 月之暗面公司创立于2023年3月&#xff0c;创始团队核心成员参与了Google Gemini、Google Bard、盘古NLP、…

java算法第32天 | 贪心算法 part02 ● 122.买卖股票的最佳时机II ● 55. 跳跃游戏 ● 45.跳跃游戏II

122.买卖股票的最佳时机II 本题中理解利润拆分是关键点&#xff01; 不要整块的去看&#xff0c;而是把整体利润拆为每天的利润。假如第 0 天买入&#xff0c;第 3 天卖出&#xff0c;那么利润为&#xff1a;prices[3] - prices[0]。 相当于(prices[3] - prices[2]) (prices[…

迷宫(一)(DFS BFS)

//新生训练 #include <bits/stdc.h> using namespace std; int n, m; bool f; char mp[15][15]; int vis[15][15]; int dir[4][2] {{-1, 0}, {0, 1}, {1, 0}, {0, -1}}; bool in(int x, int y) {return 0 < x && x < n && 0 < y && y …

美人鱼图像双目配准-Mermaid

前言&#xff1a; 我在进行一项双目测距的项目&#xff0c;已经通过matlab 进行了相机标定&#xff0c;如果手动选择左右图像里的相同物体&#xff0c;是可以给出可接受距离的。 但是现在我希望能够让左视图的坐标点和右视图的坐标点进行匹配&#xff08;如下图&#xff09; …

Windows 安装 Java JDK 17 (源码方式安装)【图文详细教程】

这里我选择安装的 Java JDK 的版本为 17 Java JDK 下载 这里选择下载压缩包形式的 Java JDK&#xff0c;下载完成后&#xff0c;我们只需要对压缩包进行解压&#xff0c;然后再配置系统环境变量就可以了下载网址&#xff1a;https://www.oracle.com/cn/java/technologies/down…