前言
今天来说一下这俩个伪类元素,因为用的不多,感觉这俩个东西已经快被遗忘了。
概念
::before 选择器向选定的元素前插入内容。
使用 content 属性来指定要插入的内容。
::after 选择器在被选元素的内容后面插入内容。
使用 content 属性来指定要插入的内容。
before 前增
<
![170124121bac6d5f0d95c0150662e840.png](https://i-blog.csdnimg.cn/blog_migrate/e9cf4d18bc86767b5cac960edac17300.png)
after 后增
<
![3d2e7fb3d0cd16122ef14638513694af.png](https://i-blog.csdnimg.cn/blog_migrate/fac62f88f0af0686da425cd81e6f0890.png)
after 和 before 多是用来清除浮动的,再说这个的时候顺便把原理也讲了
我们先来看一段清除浮动的代码:
<
![1656ad0f9051ab1288684b6cd4d03880.gif](https://i-blog.csdnimg.cn/blog_migrate/9ff3f7b6c7a586d4467a305886abbfd8.gif)
在早期我们通过在div标签中添加了一个空的标签,并且给这个空的标签清除浮动。但是这样的话就需要每次都添加一个空的标签。再来看下面这段通过 after 来清除浮动的代码
<
![589b7d635282eadbeff036c3505ad92b.gif](https://i-blog.csdnimg.cn/blog_migrate/fff82e614d717e66acbb97958a934b9a.gif)
从效果上来看,after和before也是一个标签,所以我们就可以利用这个伪元素来清除浮动,从根本上来说它和加一个空标签来清除浮动是一样的。这也是他的原理
![26eff3f058a4afacebaec27f288f09d8.gif](https://i-blog.csdnimg.cn/blog_migrate/3c8d468b8159a153a04872f994875a34.gif)