CSS——26. 伪元素2(“::before ,::after”)

::before伪类

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>伪元素</title><style type="text/css">div::before{content: "我最棒";}}</style></head><body><!--伪元素:文档结构中没有出现的元素--><!--::before  在元素内容之前添加新内容。必须配合content使用--><!--::after   在元素内容之后添加新内容。必须配合content使用--><!--可以把伪元素完全当成元素来设置样式使用--><div>我爱学习</div></body>
</html>

“ ::before ,::after伪类 ”:没有额外的添加页面结构,就可以把需要插入的内容插进去了(即在元素内容之前添加一个新的内容)

在这里插入图片描述




::after伪类:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>伪元素</title><style type="text/css">div::after{content: "我是奶龙";color: red;font-size: 12px;}}</style></head><body><!--伪元素:文档结构中没有出现的元素--><!--::before  在元素内容之前添加新内容。必须配合content使用--><!--::after   在元素内容之后添加新内容。必须配合content使用--><!--可以把伪元素完全当成元素来设置样式使用--><div>我爱学习</div></body>
</html>

可以把伪元素完全当成元素来设置样式使用(如这里的:“我是奶龙”)

div::after {

		 content: "我是奶龙";color: red;font-size: 12px;}

在这里插入图片描述

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

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

相关文章

Openssl1.1.1s rpm包构建与升级

rpmbuild入门知识 openssh/ssl二进制升级 文章目录 前言一、资源准备1.下载openssh、openssl二进制包2.安装rpmbuild工具3.拷贝源码包到SOURCES目录下4.系统开启telnet&#xff0c;防止意外导致shh无法连接5.编译工具安装6.补充说明 二、制作 OpenSSL RPM 包1.编写 SPEC 文件2.…

patchwork++地面分割学习笔记

参考资料&#xff1a;古月居 - ROS机器人知识分享社区 https://zhuanlan.zhihu.com/p/644297447 patchwork算法一共包含四部分内容&#xff1a;提出了以下四个部分&#xff1a;RNR、RVPF、A-GLE 和 TGR。 1&#xff09;基于 3D LiDAR 反射模型的反射噪声消除 (RNR)&#xff…

基于Spring Boot的海滨体育馆管理系统的设计与实现

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的海滨体育馆管理系统的设计与实现。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 宠物医院…

通过Android Studio修改第三方jar包并重新生成jar包

最近接手了来自公司其他同事的一个Unity项目,里面有一个封装的jar包要改动一下,无奈关于这个jar包的原工程文件丢失了,于是自己动手来修改下jar包,并做下记录。 一、导入第三方jar包 1、新建项目EditJarDemo(项目名随便取) 2、新建libs文件夹,把你要修改的third.jar 复制…

浅尝Selenium自动化框架

浅尝Selenium自动化框架 Selenium基本介绍Selenium原理Selenium学习要点写个Selenium Demo结束 Selenium基本介绍 Selenium 是一个开源的自动化测试工具&#xff0c;只用于测试 Web 应用程序。它支持多种编程语言&#xff08;如 Java、Python、C# 等&#xff09;来编写测试脚本…

计算机网络之---物理层设备

什么是物理层设备 物理层设备是指负责数据在物理媒介上传输的硬件设备&#xff0c;它们主要处理数据的转换、信号的传输与接收&#xff0c;而不涉及数据的内容或意义。常见的物理层设备包括网卡、集线器、光纤收发器、调制解调器等。 物理层设备有哪些 1、网卡&#xff08;N…

SQL中的数据库对象

视图&#xff1a;VIEW 概念 ① 虚拟表&#xff0c;本身不存储数据&#xff0c;可以看做是存储起来的SELECT语句 ② 视图中SELECT语句中涉及到的表&#xff0c;称为基表 ③ 针对视图做DML操作&#xff0c;对影响到基表中的数据&#xff0c;反之亦然 ④ 创建、删除视图本身&#…

flink的EventTime和Watermark

时间机制 Flink中的时间机制主要用在判断是否触发时间窗口window的计算。 在Flink中有三种时间概念&#xff1a;ProcessTime、IngestionTime、EventTime。 ProcessTime&#xff1a;是在数据抵达算子产生的时间&#xff08;Flink默认使用ProcessTime&#xff09; IngestionT…

web服务器架构,websocket

1. 非前后端分离架构 1. 前端html后端servlet 被tomcat服务器打包&#xff0c;统一指定根目录入口。通过原生表单发送到后端&#xff0c;后端根据请求数据进行重定向或请求转发&#xff0c;这样就不能进行动态渲染&#xff0c;也就必须存在很多静态html对应每一个请求。 这里…

Ubuntu 下测试 NVME SSD 的读写速度

在 Ubuntu 系统下&#xff0c;测试 NVME SSD 的读写速度&#xff0c;有好多种方法&#xff0c;常用的有如下几种&#xff1a; 1. Gnome-disks Gnome-disks&#xff08;也称为“Disks”&#xff09;是 GNOME 桌面环境中的磁盘管理工具&#xff0c;有图形界面&#xff0c;是测试…

SpringBoot之核心配置

学习目标&#xff1a; 1.熟悉Spring Boot全局配置文件的使用 2.掌握Spring Boot配置文件属性值注入 3.熟悉Spring Boot自定义配置 4.掌握Profile多环境配置 5.了解随机值设置以及参数间引用 1.全局配置文件 Spring Boot使用 application.properties 或者application.yaml 的文…

后端服务集成ElasticSearch搜索功能技术方案

文章目录 一、为什么选用ElasticSearch二、ElasticSearch基本概念1、文档和字段2、索引和映射3、倒排索引、文档和词条4、分词器 三、ElasticSearch工作原理1、Term Dictionary、Term index2、Stored Fields3、Docs Values4、Segment5、Lucene6、高性能、高扩展性、高可用①高性…

举例说明AI模型怎么聚类,最后神经网络怎么保存

举例说明怎么聚类,最后神经网络怎么保存 目录 举例说明怎么聚类,最后神经网络怎么保存K - Means聚类算法实现神经元特征聚类划分成不同专家的原理和过程 特征提取: 首先,需要从神经元中提取有代表性的特征。例如,对于一个多层感知机(MLP)中的神经元,其权重向量可以作为特…

ocrmypdf使用时的cannot import name ‘PdfMatrix‘ from ‘pikepdf‘问题

最近在做pdf的ocr,之前使用过ocrmypdf&#xff0c;打算再次使用&#xff0c;发现它更新了&#xff0c;所以就打算使用最新版 环境&#xff1a;win11anaconda 创建虚拟环境后安装语句&#xff1a; pip install ocrmypdf -i https://pypi.tuna.tsinghua.edu.cn/simple pip in…

【JavaEE进阶】获取Cookie/Session

&#x1f340;Cookie简介 HTTP协议自身是属于 "⽆状态"协议. "⽆状态"的含义指的是: 默认情况下 HTTP 协议的客⼾端和服务器之间的这次通信,和下次通信之间没有直接的联系.但是实际开发中,我们很多时候是需要知道请求之间的关联关系的. 例如登陆⽹站成…

Oracle:ORA-00904: “10“: 标识符无效报错详解

1.报错Oracle语句如下 SELECT YK_CKGY.ID,YK_CKGY.DJH,YK_CKGY.BLRQ,YK_CKGY.ZBRQ,YK_CKGY.SHRQ,YK_CKGY.YT,YK_CKGY.ZDR,YK_CKGY.SHR,YK_CKGY.BZ,YK_CKGY.JZRQ,YK_CKGY.ZT,YK_CKGY.CKLX,(case YK_CKGY.CKLXwhen 09 then药房调借when 02 then科室退药when 03 then损耗出库when…

Linux 磁盘管理命令:使用xfs 管理命令

文章目录 Linux磁盘管理命令使用xfs 管理命令1.命令说明2&#xff0e;建立 XFS 文件系统4&#xff0e;调整 XFS 文件系统各项参数5&#xff0e;在线调整 XFS 文件系统的大小6&#xff0e;暂停和恢复 XFS 文件系统7&#xff0e;尝试修复受损的 XFS 文件系统8&#xff0e;备份和恢…

《Spring Framework实战》3:概览

欢迎观看《Spring Framework实战》视频教程 Spring Framework 为基于现代 Java 的企业应用程序提供了全面的编程和配置模型 - 在任何类型的部署平台上。 Spring 的一个关键要素是应用程序级别的基础设施支持&#xff1a;Spring 专注于企业应用程序的 “管道”&#xff0c;以便…

借助免费GIS工具箱轻松实现las点云格式到3dtiles格式的转换

在当今数字化浪潮下&#xff0c;地理信息系统&#xff08;GIS&#xff09;技术日新月异&#xff0c;广泛渗透到城市规划、地质勘探、文化遗产保护等诸多领域。而 GISBox 作为一款功能强大且易用的 GIS 工具箱&#xff0c;以轻量级、免费使用、操作便捷等诸多优势&#xff0c;为…

均值滤波从图像复原角度的解释

廖老师说若将图像生成看作一个随机过程&#xff0c;均值滤波&#xff08;Mean Filtering&#xff09;可以视为在高斯噪声模型下的线性最小均方估计&#xff08;Linear Minimum Mean Squared Error, LMMSE&#xff09;或者极大似然估计&#xff08;Maximum Likelihood Estimatio…