::before和::after伪元素

伪元素

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

::before和::after 特点

1. 伪元素不占用dom元素节点
2. 默认为inline
3. 使用时必须要有content属性
   字符串
   attr（attr_name）：伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值
   url()/uri()： 引用外部资源，例如图片；
   counter()： 调用计数器，可以不使用列表元素实现序号问题。

常用场景

1. 清除浮动

.fl{
	float: left;
}
.fr{
	float: right;
}
.cf::before,
.cf::after{
	content: " ";
	display: block;
	visibility: hidden;
}
.cf::after{
    	clear: both;
   }
.cf{
	zoom:1;
}

2. 利用attr（）来实现动态功能
   在页面中常见这种问题，页面上加载的图片在无法加载时会显示一个破损图片，直接影响页面的美观；

之后补上

3. 与counter()结合实现序号问题，而不用使用列表元素。具体还要结合css的 counter-increment 和 counter-reset 属性的用法 。
4. 特效

放大缩小

在这里插入代码片

箭头

在这里插入代码片

小三角

在这里插入代码片