盒子
盒子
文章目录
  1. 伪元素::after 和::before
    1. content的值可以为:
    2. 双冒号(::)和单冒号(:)的区别:
    3. 浏览器支持情况

伪元素的使用和基本语法介绍

伪元素::after 和::before

::after 是一个css中的伪元素,使用::after,你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。虽然最终生成的东西并不是真正的DOM里的内容,但这些内容能像普通内容一样显示,基本的效果是这样的:

css代码:


html代码:


显示效果:

注意:
1想让插入的内容出现在其它内容前,使用::before,否者,使用::after。

2在代码顺序上,::after生成的内容也比::before生成的内容靠后。如果按堆栈视角,::after生成的内容会在::before生成的内容之上。


content的值可以为:

1)字符串: content: “字符串”; – 特殊字符串需要转义或unicode编码。

2)图片:content: url(/path/to/image.jpg); – 图片会按原尺寸大小的插入,不能改变,因为渐变效果实际上也是图像,所以,这些伪元素里也可以使用渐变效果。

3)空: content: “”; – 可以用于清除左右浮动元素,也能够用于使用背景图片(这是可以设置高和宽,甚至使用background-size。)

双冒号(::)和单冒号(:)的区别:

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



双冒号(::)是一种新语法,是用来将伪元素选择器和伪元素区别开。如果不需要IE8支持,就用双冒号(::)吧。

浏览器支持情况

都是一些小问题:

Firefox 3.5- 不支持伪元素的绝对定位。

Opera 9.2里,伪元素里的空格会显示,如同在pre里一样。

IE 8 不支持伪元素里的z-index