伪元素before和after用法的区别

html-css06

伪元素before和after用法的区别,第1张

区别：

1）before是css中的一种伪元素，可用于在某个元素之前插入某些内容。

2）after是css中的一种伪元素，可用于在某个元素之后插入某些内容。

简单的代码测试：

<style>

p:before{

content: "H" /*:before和:after必带技能，重要性为满5颗星*/

}

p:after{

content: "d" /*:before和:after必带技能，重要性为满5颗星*/

}

</style>

<p>ello Worl</p>

以上的代码将会在页面中展现的是"Hello World"。通过浏览器的"审查元素"看到的内容是：

<p>

::before

"ello Worl"

::after

</p>

p标签内部的内容的前面会被插入一个:before伪元素，该伪元素内包含的内容是"H"；而在p标签内的内容后面会被插入一个:after伪元素，该元素包含的内容是"d"。作为一只合格的程序猴子，捍卫"Hello World"的完整存在是必要的。

首先要明白一种思想：结构和样式分离。

结构和样式分离，就意味着：没有样式表，HTML文档也是一个完整的文档；没有样式表，也能正常阅读用HTML表达的所有内容。明白这种思想就能很好理解样式表中使用------ :before 和 :after中的content: ""------就算没有------:before 和 :after中的content: ""------HTML文档也不会受到影响，HTML文档也是一个完整的文档，所以，用简单的话来说： :before 和 :after中的content: ""不过是对HTML的装潢，使HTML看起来更漂亮一些。

延展阅读

CSS中伪元素after的作用

css可以对元素做的事，对这个伪元素都可以做，然后也不奇怪能做出个三角形了（三角形是用很宽的边框+内容宽高都为0做出来的）。

但是，伪元素因为不在DOM里存在，也不会在调试工具里显示，所以不太好调试伪对象:after还有一个重要的用法--清除浮动。

这种清除浮动的方法几乎成了一个固定的模式，很多大型网站里面都有用到。

以下代码：

.weibo-clearfix:after{clear:bothcontent:"."display:blockheight:0width:0visibility:hidden}

方法1：可以改用after方法，此方法类似于before方法，不同的是，内容将会放在对象的结尾处，而before方法会插入内容在开始的地方，当然就无法排列在最底部了。

方法2：如果你的内容已经脱离了文档流，想定位到底部，可以使用以下方式定位到底部。

bottom: 0px

position: absolute

但需要注意的是，外层容器CSS属性的position必须设置为relative否则定位内容不会参照容器而导致飞出容器的现象。