欢迎访问CMS集中营! 本站QQ交流群:292800309
设为首页  |   加入收藏  |   RSS订阅  |   网站地图
CMS仿站建站技术教程_CMS免费模板源码下载-CMS集中营

首页 |  图文教程 |  免费模板 |  PHP |  MYSQL |  DIV+CSS |  JS |  ThinkPHP |  其他 | 

当前位置:首页 > DIV+CSS > 正文
相关教程

伪元素::after和::before的用法与区别

时间:2016-03-14 16:21:58   作者:烈鹰网络工作室   点击:
::after 是一个CSS伪元素,使用 ::after ,你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。虽然最终生成的东西并不是真正的DOM里的内容,但这些内容能像普通内容一样显示,基本的效果是这样的:
CSS代码
div::after {
  content: "你好";
}

HTML代码
<div>
  <!-- div里的其它内容 -->
  你好
</div>

::before 跟 ::after 完全类似,只是它插入的内容会出现在其它内容之前。
这两者的区别可以简单描述为:
想让插入的内容出现在其它内容前,使用 ::before ,否者,使用 ::after 。
在代码顺序上, ::after 生成的内容也比 ::before 生成的内容靠后。如果按堆栈视角, ::after 生成的内容会在 ::before 生成的内容之上。
content的值可以为:
字符串: content: "字符串"; – 特殊字符串需要转义或unicode编码。
图片:content: url(/path/to/image.jpg); – 图片会按原尺寸大小的插入,不能改变,因为渐变色实际上也是图像,所以,这些伪元素里也可以使用渐变色。
空: content: ""; – 可以用于清除左右浮动元素,也能够用于使用背景图片(这是可以设置高和宽,甚至使用background-size。)
计数器: content: counter(li); – 在列表时计算行数非常方便。
需要注意的是,你不能用它们插入HTML(至少这些HTML代码会被转义输出)。content: "<h1>nope</h1>";
双冒号(::)和单冒号(:)的区别
所有支持CSS3的双冒号(::)语法的浏览器都会支持单冒号(:)语法,但IE8只支持单冒号。建议只使用单冒号,以获得最佳的浏览器支持。
双冒号(::)是一种新语法,是用来将伪元素选择器和伪元素区别开。如果不需要IE8支持,就用双冒号(::)吧。
浏览器支持情况
都是一些小问题:
Firefox 3.5- 不支持伪元素的绝对定位。
Opera 9.2里,伪元素里的空格会显示,如同在pre里一样。
IE 8 不支持伪元素里的z-index
TAGS:伪元素 ::after ::before