div中内容靠右_CSS中的::after ::before与原理详解

前言

今天来说一下这俩个伪类元素，因为用的不多，感觉这俩个东西已经快被遗忘了。

概念

::before 选择器向选定的元素前插入内容。
使用 content 属性来指定要插入的内容。

::after 选择器在被选元素的内容后面插入内容。
使用 content 属性来指定要插入的内容。

before 前增

<

after 后增

<

after 和 before 多是用来清除浮动的，再说这个的时候顺便把原理也讲了

我们先来看一段清除浮动的代码：

<

在早期我们通过在div标签中添加了一个空的标签，并且给这个空的标签清除浮动。但是这样的话就需要每次都添加一个空的标签。再来看下面这段通过 after 来清除浮动的代码

<

从效果上来看，after和before也是一个标签，所以我们就可以利用这个伪元素来清除浮动，从根本上来说它和加一个空标签来清除浮动是一样的。这也是他的原理