欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

::before和:after的区别解析

程序员文章站 2022-06-08 20:40:14
::before 和:after的区别 ::和:区别: 1. : 伪类,用于向某些选择器添加特殊的效果。(css2提出) ::伪元素,用于将特殊的效果添加到某些选择器(css3提出,目的是和伪类区分...

::before 和:after的区别

::和:区别:

1.

: 伪类,用于向某些选择器添加特殊的效果。(css2提出) ::伪元素,用于将特殊的效果添加到某些选择器(css3提出,目的是和伪类区分开)

常见伪类——:hover, :link, :active, :target, :not(), :focus。 常见伪元素——::first-letter, ::first-line, ::before, ::after, ::selection。

2.

所有支持 :: 语法的都会支持 : 语法,但ie8只支持单冒号。建议使用单冒号,以获得最佳的浏览器支持 .

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。

:before /:after这两个伪类下特有的属性 **content** ,用于在 css 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容,不会出现在 dom 中,不可复制,仅仅是在 css 渲染层加入。

注:伪元素可用来清除浮动:清除浮动的方法