css---before和after伪元素

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.下拉框的小角标

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

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

相关文章

这样一位美丽的女子

在《生有热爱》这本书中看到这样一句话“斯人若彩虹&#xff0c;遇上方知有”&#xff0c;瞬间击中了我的灵魂&#xff0c;这句话完美的表达了我对爱人的情感。以前我总以为“遇上爱人是我这辈子最大的幸运”是我此生对爱人的完美表达&#xff0c;直到遇到这句话我才深刻体会到…

django models对应的mysql类型

Django模型字段类型与MySQL数据库类型的对应关系如下&#xff1a; Django 模型字段类型MySQL 数据库类型AutoFieldBIGINT UNSIGNEDCharFieldVARCHARIntegerFieldINTDecimalFieldDECIMALDateFieldDATEDateTimeFieldDATETIMEFileField, ImageFieldVARCHAR (用于文件路径)Boolean…

Python容器 之 字典--字典的遍历

字典存在 键(key), 值(value) , 遍历分为三种情况 1.遍历字典的键 循环拿到字典中的每个键名 # 方式一 for 变量 in 字典: print(变量) # 方式二 for 变量 in 字典.keys(): # 字典.keys() 可以获取字典所有的键 print(变量) my_dict {name: 小明, age: 18, sex: 男}…

Node.js的应用场景

Node.js具有广泛的应用场景&#xff0c;其基于Chrome V8引擎的JavaScript运行环境使得JavaScript能够运行在服务器端&#xff0c;极大地扩展了其应用范围。以下是Node.js的主要应用场景&#xff1a; 1. 服务器端开发 Web服务器和API服务器&#xff1a;Node.js非常适合构建服务…

Kamailio-Web管理页面Siremis的安装与部署

siremis 是针对于 Kamailio 的web管理接口&#xff0c;使用PHP书写&#xff0c;更新至2020年&#xff0c;相对不是太新但是是官方友链的 以下就采用 Ubuntu 22.04Siremis 5.8.0apache http server 2.4php7.0 如有疑问请参看官方指南 以下开始介绍操作步骤 安装apache2.4 we…

python转换其他分辨率的图片为固定分辨率的方法

**需求&#xff1a;**把其他分辨率转换成1920*960的分辨率&#xff0c;并保存下来 你可以使用Pillow库&#xff0c;这是一个非常流行的图像处理库。以下是一段示例代码&#xff0c;演示如何使用Pillow来调整图片的分辨率&#xff1a; from PIL import Imagedef resize_image(…

《艺术品交易导报》

《艺术品交易导报》 《艺术品交易导报》是由心海集团主管&#xff0c;北京心海文化艺术研究院主办的&#xff0c;鉴于国家的扶持政策和艺术品交易中心的崛起&#xff0c;为推动艺术品交易走向更加成熟和规范化道路而做的一份艺术品交易领域的专业报刊。在追求艺术品价值的同时…

学习一个新的知识点的五个状态

# 学习一个新的知识点的五个状态是&#xff1a; # 未知&#xff0c;接触&#xff0c;熟悉&#xff0c;模仿&#xff0c;创造。# 其中 接触 熟悉 模仿 是我们学习要经历的状态。 # 接触&#xff0c;主要是了解名称&#xff0c;有什么功能 # 熟悉&#xff0c;就是有功能如何使用…

【Qt项目学习--使用QTcpserver和libssh的区别】

很多Qt的教程都是基于QTcpServer实现的服务器客户端架构&#xff0c;而我想实现的用户名密码登陆&#xff0c;跟下来教程视频发现并没有实现&#xff0c;于是去了解libssh&#xff0c;实现IP地址登陆之后使用用户名密码实现。 libssh和QTcpServer之间的主要不同点&#xff1a;…

14-5 小语言模型SLM 百科全书

想象一下这样一个世界&#xff1a;智能助手不再驻留在云端&#xff0c;而是驻留在你的手机上&#xff0c;无缝理解你的需求并以闪电般的速度做出响应。这不是科幻小说&#xff1b;这是小型语言模型 (SLM) 的前景&#xff0c;这是一个快速发展的领域&#xff0c;有可能改变我们与…

MySQL数据库数据迁徙:从本地到Linux服务器

"男人的浪漫&#xff0c;绝对是拥有一台属于自己的服务器" MySQL数据库数据迁徙就两步&#xff1a;本地导出和服务器导入。 本地导出 本地导出的时候&#xff0c;需要注意你的CMD命令行必须是以管理员身份运行。如果你的计算机找不到mysqldump这个命令&#xff0c;…

移动端如何调试本地运行的前端项目

1.问题场景 本地通过Live Server开启服务&#xff0c;http://127.0.0.1:5500/html/test.html&#xff0c;调试移动端兼容性问题 2.解决办法 要在手机上访问电脑本地运行的服务http://127.0.0.1:5500/html/test.html&#xff0c;需要确保手机和电脑处于同一局域网内&#xff0…

Android手机拍照或从本地相册选取图片设置头像-高版本适配

GitHub传送门 问题点 Android 7.0 新增FileProvider 参考链接 图片裁减需要的临时权限 intent.setFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION | Intent.FLAG_GRANT_WRITE_URI_PERMISSION);Android 10 只能读取自己APP目录下的文件 Unable to open /storage/emulated…

三、Prometheus监控Tidb

1.下载node_exporter https://download.pingcap.org/node_exporter-v1.3.1-linux-amd64.tar.gz将其配置为系统服务&#xff1a; vim /usr/lib/systemd/system/node_exporter.service[Unit] Descriptionnode_exporter Documentationhttps://prometheus.io [Service] ExecStart…

单片机软件架构连载(1)-枚举(enum)

今天跟大家讲一下我在产品开发时&#xff0c;用枚举(enum)的一些骚操作&#xff0c;都是实战经验&#xff0c;不难&#xff0c;但开发经验尚浅的话&#xff0c;不一定能把它灵活应用。 为什么要讲枚举呢&#xff1f; 因为我发现它是一个容易被遗忘&#xff0c;同时又非常重要的…

RK3568驱动指南|第十六篇 SPI-第195章 实践:移植官方mcp2515驱动

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…

顶顶通呼叫中心中间件(mod_cti基于FreeSWITCH)-http话术接口测试流程

文章目录 前言联系我们部署http话术PHP例子Java例子 登录ccadmin-web配置拨号方案创建与注册分机创建分机注册分机 测试 前言 用户一直想体验机器人话术的效果&#xff0c;但却找不到门路。本文提供了配置机器人话术接口的配置流程&#xff0c;供用户体验。用户可以根据本文的…

springboot交流论坛网站-计算机毕业设计源码00304

Springboot交流论坛网站 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了交流论坛网站的开发全过程。通过分析交流论坛网站管理的不足&#xff0c;创建了一个计算机管理交流论坛网站的方案。文章介绍了交流论坛…

Excel 宏录制与VBA编程 ——VBA编程技巧篇三 (未初始化Range判断、遍历工作表方法、工作表多行重复内容剔除)

未初始化Range的判断 有时候需要对已定义未初始化的range对象做判断 dim curRange as range If curRange Is Nothing Thendebug.print("未初始化的..") End If遍历工作表方法 Chr&#xff08;10&#xff09;&#xff1a;ASCII码中的换行键&#xff0c;相当于vbLF。 …

如何在Android Studio中查看APP客户端日志

测试Android应用时&#xff0c;日志查看是一个至关重要的调试工具&#xff0c;它帮助测试人员快速定位问题。幸运的是&#xff0c;Android Studio为我们提供了一个强大的工具——Logcat&#xff0c;使得查看运行时日志变得直接且简单。本文将引导你如何在Android Studio中使用L…