当前位置： 首页 > news >正文

css---before和after伪元素

news 2026/3/27 14:44:32

1.什么是伪元素

伪元素不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用如页面元素一样的CSS样式，表面上看上去貌似是页面的某些元素来展现，实际上CSS样式展现的行为，因此被称为伪元素。

注意：1.伪元素:before和:after添加的内容默认是行内元素（加宽高无效，需要调整为行内块或者块级元素），两个伪元素的content属性，表示伪元素的内容，设置before和after时必须设置其content属性，否则伪元素不起作用。

2.伪元素不占位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div::before {content: "我是BEFORE，";background-color: green;width: 100px; /*行内元素不生效的*/height: 100px;		/*类选择、伪类选择器 就是选区对象伪元素选择器，本质上是插入一具元素（标签 盒子），只不过是行内元素；*/}div::after {content: "我是AFTER，";background-color: red;display: block; /*转成块元素*/width: 100px;height: 100px;/*类选择、伪类选择器 就是选区对象伪元素选择器，本质上是插入一具元素（标签 盒子），只不过是行内元素；*/}	</style>
</head>
<body><div>我是BODY</div>
</body>
</html>

效果：

2.伪元素的应用

1.装饰标题

2.清除浮动

3.下拉框的小角标

相关文章：

css---before和after伪元素

1.什么是伪元素 伪元素不是真正的页面元素&#xff0c;html没有对应的元素&#xff0c;但是其所有用法和表现行为与真正的页面元素一样&#xff0c;可以对其使用如页面元素一样的CSS样式&#xff0c;表面上看上去貌似是页面的某些元素来展现&#xff0c;实际上CSS样式展现的行…...

编程日记 2024/7/4 11:38:18

下载后端返回的图片，而不是打开图片

使用 window.location.href 和 window.open 后都是打开图片&#xff0c;原因是&#xff0c;当浏览器发现是浏览器支持的文件类型&#xff0c;例如 jpg、png、svg 等&#xff0c;默认是浏览器打开。 解决 fetch createObjectURL fetch 转换为 blob 对象 createObjectURL() 静…...

编程日记 2024/7/4 11:35:14

ELISA实验前，需要做好哪些准备？

进行ELISA试剂盒实验前&#xff0c;需要进行周密的准备工作以确保实验的顺利进行和实验的准确性。那么&#xff0c;具体应该做哪些准备呢&#xff1f;欣博盛生物为您总结了一些关键的准备工作步骤&#xff1a; 1. 阅读说明书 仔细阅读ELISA试剂盒的说明书&#xff0c;了解试剂…...

编程日记 2024/7/4 11:34:12

浅谈 Linux 中的 core dump 分析方法

文章目录 一、什么是 core dump二、发生 core dump 的原因1. 空指针或非法指针引起 core dump2. 数组越界或指针越界引起的 core dump3. 数据竞争导致 core dump4. 代码不规范 三、core dump 分析方法1. 启用 core dump2. 触发 core dump2-1. 因空指针解引用而崩溃2-2. 通过 SI…...

编程日记 2024/7/4 11:33:11

自研直播系统-直播系统实战

文章目录 1 流媒体基础本文教程下载地址1.1 流媒体1.2 流式传输方式1.2.1 顺序流式传输1.2.2 实时流式传输 1.3 流媒体传输协议1.3.1 rtmp协议1.3.2 HLS协议1.3.3 RTSP协议1.3.4 视频流的对比 1.4 视频编码(codec)1.5 分辨率的规范分辨率簡介&#xff1a;1.5.2 分辨率單位 1.6 …...

编程日记 2024/7/4 11:32:09

python数据分析入门学习笔记

目录 一、 数据分析有关的python库简介 (一)numpy (二)pandas (三)matplotlib (四)scipy (五)statsmodels (六)scikit-learn 二、 数据的导入和导出 三、 数据筛选 四、 数据描述 五、 数据处理 六、 统计分析 七、 可视化 八、 其它![](https://…...

编程日记 2024/7/4 11:31:07

SyntaxError: invalid character in identifier 解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

编程日记 2024/7/4 11:30:06

装箱问题汇总

一维装箱 整数规划建模 参考 二维装箱 数学建模 参考1 参考2...

编程日记 2024/7/4 11:29:05

你的B端系统考虑移动化了？还没？那就小心out了。

B端系统移动化的趋势是不可阻挡的。随着移动设备的普及和移动互联网的发展&#xff0c;越来越多的企业和组织意识到移动化对于提高工作效率、拓展市场和提供更好的用户体验的重要性。以下是一些导致B端系统移动化趋势不可阻挡的原因&#xff1a; 移动办公需求&#xff1a;越来越…...

编程日记 2024/7/4 11:26:00

大数据招商的应用场景及实施路径有哪些？

当下&#xff0c;我国已经进入数字经济与实体经济融合发展的新阶段&#xff0c;数字技术和数字化转型落地日臻成熟&#xff0c;数据要素价值释放深入到了我国各个领域的发展&#xff0c;招商引资也不例外&#xff0c;在传统招商模式效果日渐甚微的大环境下&#xff0c;大数据招…...

编程日记 2024/7/4 11:24:59

【C++】 C/C++预处理器介绍

C预处理器&#xff08;Preprocessor&#xff09;是编译过程中的一个阶段&#xff0c;它在编译器进行实际编译之前对源代码进行处理。预处理器提供了一系列的指令&#xff0c;用于条件编译、文件包含、宏定义等操作。以下是一些常见的预处理器指令&#xff1a; 宏定义&#xff…...

编程日记 2024/7/4 11:23:58

MySQL—创建查看删除备份恢复数据库

创建数据库 创建数据库 LLF_DB01CREATE DATABASE LLF_DB01删除数据库DROP DATABASE LLF_DB01创建一个使用utf8字符集的数据库并带校对规则的数据库CREATE DATABASE hsp_db03 CHARACTER SET utf8 COLLATE utf8_bin 查看、删除数据库 显示所有的数据库SHOW DATABASES显示数据库…...

编程日记 2024/7/4 11:22:57

1.4 ROS2集成开发环境搭建

1.4.1 安装VSCode VSCode全称Visual Studio Code&#xff0c;是微软推出的一款轻量级代码编辑器&#xff0c;免费、开源而且功能强大。它支持几乎所有主流的程序语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、GIT 等特性&#xff0c;支持插件…...

编程日记 2024/7/4 11:19:53

数组和对象在内存中的区别

一、内存分配方式 数组在内存中是一段连续的存储空间&#xff0c;每个元素占据一个位置&#xff0c;这种连续存储方式使得数组的访问速度更快。对象在内存中是以键值对的形式存储的&#xff0c;每个键值对都需要单独的内存空间&#xff0c;这种非连续的存储方式可能会导致访问…...

编程日记 2024/7/4 11:17:51

智能胎教仪，科技与教育的融合-N9301胎教仪语音方案

随着科学技术的不断进步&#xff0c;人们对婴幼儿教育的认知也日趋成熟和全面。其中&#xff0c;胎教作为一种重要的早期教育方式&#xff0c;近年来备受瞩目。而胎教仪语音芯片的研发&#xff0c;正是为了满足这一需求&#xff0c;为胎儿的健康成长提供更加便捷的胎教方案。 一…...

编程日记 2024/7/4 11:16:49

代码随想录2链表

2 移除元素 Leetcode203 设置虚拟头节点 dummyHead...

编程日记 2024/7/4 11:14:46

Java8新特性常见用法

Java8新特性 示例类Stream API 使用示例forEach：遍历Stream：创建流map：转换元素filter：过滤元素collect（收集元素） 和 Collectors（分组、连接）sorted 和 comparing（搭配排序）toMap：转换Map元素collectingAndThen：过滤掉相同数据toUpperCase：转大写distinct：去重c…...

编程日记 2024/7/4 11:13:45

Web3 前端攻击：原因、影响及经验教训

DeFi的崛起引领了一个创新和金融自由的新时代。然而&#xff0c;这种快速增长也吸引了恶意行为者的注意&#xff0c;他们试图利用漏洞进行攻击。尽管很多焦点都集中在智能合约安全上&#xff0c;但前端攻击也正在成为一个重要的威胁向量。 前端攻击的剖析 理解攻击者利用前端漏…...

编程日记 2024/7/4 11:12:44

C++ 如何解决回调地狱问题

“地狱回调”&#xff08;Callback Hell&#xff09;是指在编程中使用过多嵌套回调函数&#xff0c;导致代码难以阅读和维护。C 提供了多种方法来解决这个问题&#xff0c;包括以下几种常见的方法&#xff1a; 使用 Lambda 表达式和标准库的 std::function使用 std::future 和…...

编程日记 2024/7/4 11:09:42

普利姆最小生成树算法 c++

普里姆（Prim）算法是一种用于在加权连通无向图中查找最小生成树（MST, Minimum Spanning Tree）的贪心算法。最小生成树是一个子图，它包括图中的所有顶点，并且边的总权重最小。该算法的基本思想是从一个顶点开始，逐步扩展生成树，直到包括所有顶点。 算法步骤 初始化： 从…...

编程日记 2024/7/4 11:08:41

OpenClaw技能扩展：用QwQ-32B实现公众号自动发布

OpenClaw技能扩展&#xff1a;用QwQ-32B实现公众号自动发布 1. 为什么需要公众号自动化发布 作为一个技术博主&#xff0c;我每周都要在公众号发布2-3篇技术文章。最让我头疼的不是写作本身&#xff0c;而是发布前的繁琐流程&#xff1a;手动调整Markdown格式、生成封面图、上…...

编程新知 2026/3/27 14:15:52

ESP32开发实战：5分钟搞定MicroPython调用C库驱动LED（附完整代码）

ESP32混合编程实战&#xff1a;用MicroPython调用C库实现高性能LED控制 在物联网设备开发中&#xff0c;ESP32凭借其出色的性价比和丰富的功能接口成为硬件开发者的首选。而MicroPython作为嵌入式领域的Python实现&#xff0c;以其简洁的语法和快速的开发周期赢得了大量开发者的…...

编程新知 2026/3/27 12:20:29

Obsidian插件本地化全攻略：从英文界面到中文体验的完整实施路径

Obsidian插件本地化全攻略&#xff1a;从英文界面到中文体验的完整实施路径 【免费下载链接】obsidian-i18n 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-i18n 在全球化协作与知识管理的场景中&#xff0c;Obsidian插件的英文界面常成为用户高效使用的障碍。…...

编程新知 2026/3/27 12:16:27

openGauss服务化部署实战：systemd单元文件配置详解

1. 为什么需要systemd管理openGauss 每次重启服务器都要手动启动数据库&#xff1f;这种操作既低效又容易出错。把openGauss交给systemd管理后&#xff0c;你会发现数据库服务像系统内置服务一样听话——开机自动启动、异常自动重启、日志集中收集&#xff0c;这才是专业运维该…...

编程新知 2026/3/27 10:13:30

实战指南：基于OpenSpec规范，使用快马平台生成可直接集成的微服务客户端代码

今天在微服务开发中遇到一个典型需求&#xff1a;我们的支付网关服务已经用OpenAPI 3.0规范定义好了接口&#xff0c;现在需要在另一个Java服务中调用这些接口。传统做法要手动写HTTP客户端代码&#xff0c;既耗时又容易出错。最近发现InsCode(快马)平台能基于OpenSpec文档自动…...

编程新知 2026/3/27 9:41:06

基于WebSocket与Protobuf协议的抖音直播间实时数据采集方案

基于WebSocket与Protobuf协议的抖音直播间实时数据采集方案 【免费下载链接】DouyinLiveWebFetcher 抖音直播间网页版的弹幕数据抓取&#xff08;2024最新版本&#xff09; 项目地址: https://gitcode.com/gh_mirrors/do/DouyinLiveWebFetcher 技术背景与挑战 在当今直…...

编程新知 2026/3/27 8:18:30

每日一题 力扣 3548. 等和矩阵分割 II 前缀和 哈希表 C++ 题解

文章目录题目描述思路简述代码实现复杂度分析踩坑记录题目描述 力扣 3548. 等和矩阵分割 II 示例 1&#xff1a; 输入&#xff1a; grid [[1,4],[2,3]] 输出&#xff1a; true 解释&#xff1a; 在第 0 行和第 1 行之间进行水平分割&#xff0c;结果两部分的元素和为 1 4 5…...

编程新知 2026/3/27 8:06:27

从51单片机到STM32：我的裸机架构升级踩坑实录（附代码片段）

从51单片机到STM32&#xff1a;我的裸机架构升级踩坑实录 第一次用STM32F103替换掉手头的STC89C52时&#xff0c;我对着闪烁的LED灯陷入了沉思——这个32位的"怪兽"显然不应该继续沿用51那套超级循环的编程方式。三年前那个在延时函数里死等按键响应的菜鸟程序员&…...

编程新知 2026/3/27 6:51:22

基于Matlab的转子系统临界转速与主振型求解：传递矩阵法及其参数涉及等截面、材料与轮盘参数的...

140.基于matlab的求解转子系统前三个临界转速和主振型的传递矩阵法转子系统的不平衡响应 参数涉及等截面参数、材料参数、轮盘参数 程序已调通&#xff0c;可直接运行传递矩阵法这玩意儿在转子动力学里属于实操性极强的工具&#xff0c;今天咱们就拿Matlab直接开搞转子系统的前…...

编程新知 2026/3/27 6:17:03

OpenClaw自动化邮件处理：GLM-4.7-Flash模型分类与回复

OpenClaw自动化邮件处理&#xff1a;GLM-4.7-Flash模型分类与回复 1. 为什么需要自动化邮件处理 每天早晨打开邮箱时&#xff0c;我的收件箱总是堆满了各种邮件——工作汇报、会议邀请、订阅资讯、促销广告……手动分类和回复这些邮件至少会消耗我30分钟时间。直到上个月&…...

编程新知 2026/3/27 5:34:53