一、CSS 伪元素
CSS伪元素是指，在CSS 中使用一些特殊的选择器，创建出来的虚拟元素， 并不是实际存在的HTML元素；
用来选择和操作文档中的特定部分，实现一些特殊效果；
伪元素使得在不增加额外HTML标签的情况下，对文档中的内容进行样式化；
伪元素也是一种元素，可以设置html中支持的各种属性，包括元素的布局、定位、宽高、背景等等；
本文主要介绍::before 、::after 这个两个伪元素的相关内容和一些使用场景；
二、::before ::after 介绍
::before ::after 伪元素用来给元素前面或者后面插入指定内容；
使用content属性来指定要插入的内容；
必须配合content属性一起使用，content的属性值可以为空；
伪元素的display属性值默认为inline；
1、::before
::before选择器用来向指定元素之前插入内容；
(1)语法
元素::before{
content: "要插入的内容";
/* 其他属性 */
}
(2)示例
给页面所有的p元素前面插入内容；
第一个P标签中的内容
第二个P标签中的内容
第三个P标签中的内容
2、::after
::after选择器用来向指定元素之后插入内容；
(1)语法
元素::after{
content: "要插入的内容";
/* 其他属性 */
}
(2)示例
给页面所有的p元素后面插入内容；
第一个P标签中的内容
第二个P标签中的内容
第三个P标签中的内容
3、content 常用属性值
::before ::after 必须配合content属性一起使用，以下是content的常用属性值：
(1)设置文本内容
设置content的属性值为string类型，即可给伪元素添加文本；
......
我是HTML元素中的文本
(2)设置媒体链接
通过url()属性值，即可导入媒体文件为伪元素的内容；
......
示例图片
注意，这里使用url添加的图片不能设置大小，最好通过背景添加图片；
(3)设置前 || 后引号
通过open-quote或close-quote属性值，即可给设置伪元素的内容为前引号或后引号；
......
添加前引号
添加后引号
(4)获取元素属性
通过attr()获取元素的某一个属性值(以字符串的形式返回)，并设置为伪元素的内容；
(5)设置计数器
......
、、、、、、我是第1个div、、、、、、
、、、、、、我是第2个div、、、、、、
、、、、、、我是第3个div、、、、、、
、、、、、、我是第4个div、、、、、、
三、::before ::after 应用场景
虽然 ::before ::after 这两个伪元素的使用方式非常简单，但若能灵活应用，就能实现一些很不错的CSS效果；
1、设置统一字符
...
姓名
年龄
出生日期
居住地址
2、通过背景添加图片
......
通过背景添加图片
3、添加装饰线
......
添加装饰线
4、右侧展开箭头
......
账号设置
权限管理
相关服务
帮助与反馈
......
5、对话框小三角
......
Nice to meet you!
Nice to meet you, too!
6、插入icon图标
......
XXX 管理系统
请输入账号
请输入密码
登 录
忘记密码
来源：https://blog.csdn.net/m0_65029152/article/details/140346358