CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所以叫做“伪元素”。下面就说一下常见的两个伪元素before和after。

一、伪元素基本用法

在CSS选择器中加上相应伪类选择符就可以了,像这样:#example: before或者#example: after,这里是使用ID选择器,比如下面的CSS代码:

#example:before {
content: "\"";
}
#example:after {
content: "\"";
}

它的效果就是为example标签前后加上双引号。

和伪类的选择符很像,但是有一点小区别,就是伪类选择符实际上是用两个冒号,::before的形式,以和伪类区别开,但是只用一个冒号浏览器也是可以识别的,在CSS3中规定是一个冒号就可以了。

如果没有绑定标签,像这样::before{ content:”=”;} 这样的伪元素是没有意义的,代码会在DOM里的每个元素的内容之前插入散列符号。即使你删除了<body>标签和它的所有内容,你仍会在页面上看见两个散列符号:一个在<html>里,另一个在<body>标签里。

那么可不可以给伪元素再添加伪元素呢?比如下面这个代码:

#example:after:after{
content: "after";
}

在浏览器中刷新,测试一下会发现什么也没有显示,也就是说再给伪元素添加伪元素目前很多浏览器上是无效的,浏览器忽略掉该定义,只能识别一层伪元素,但是既然可以伪元素添加伪元素,可以期待再为伪元素添加伪元素,其表现力是很强的。

二、伪元素属性和样式

1.content属性

每个伪元素必须要有content属性,否则的话浏览器不能识别,你可以为content属性添加空引用作为它的值(即:content:“”)。

你也可以为content包含一个指向一个图像的URL,就像在css里包含一个背景图像一样:

p:before {

  content: url(image.jpg);
}

也可以包含一个Data URI代替图像引用,就像使用css背景一样。

你还可以选择ATRR(X)中的函数的形式。“把X属性的值以字符串的形式返回”,比如:

a:after {
content: attr(href);
}

attr()函数的功能是把得到特定属性的值并把它作为插入的文本成为一个伪元素。

上面的代码会导致页面上的每一个<a>元素的href值立即被放置在每个各自的<a>元素的后面。在文档被打印时,它可以用作一个包含所有URl的打印样式表。

2.标签属性

伪元素也是元素,所以你可以为它添加大部分其他元素具有的属性,比如定位属性,字体属性,背景属性和盒模型的属性等,另外由于伪元素默认是内联元素,所以如果要使得盒模型中的height等属性有效的话,必须要把它转化为块元素,具体就是设置其display属性为block,或者设置为float等。如下:

#example:after{
position: absolute;
display: block;
left: 20px;
top: 20px;
content: "\"";
width: 20px;
height: 20px;
background: #6F3;
}

既然伪元素可以定义position等属性,那么before和after的约束就很有限了,before和after的区别只能是在没有特殊定义伪元素的位置等信息的时候的默认行为不一致,before出现在相对绑定的元素之前,而after出现在相对绑定的元素位置之后。

另外既然可以为伪元素定义盒子模型的属性,就不得不说,伪元素默认为其目标元素的子元素,比如#example:after,伪元素after的父元素就是#example选择符对应的元素,它具有一般子元素盒模型的特性,即为他定义的height和width等属性规则为影响目标元素的规则。

三、伪元素的兼容性

基本可以放心的使用伪元素,因为它有很好的兼容性,可以不用加浏览器前缀而很好的使用它。

支持:before 和 :after 伪元素的浏览器有:

  • Chrome 2+,
  • Firefox 3.5+ (3.0 had partial support),
  • Safari 1.3+,
  • Opera 9.2+,
  • IE8+ (with some minor bugs),
  • 几乎所有的移动浏览器。

但是IE6和IE7上并不支持,如果不是很在意他们的用户数量的话,基本可以很自由的使用啦。

四、伪元素的作用

这里借用Thoriq Firdaus的几个例子简单说一下伪元素的用法。另外伪元素既然是伪元素,那么作为结构与表现分离的一种实现,其作用应该是对文本起到很好的修饰作用,而不是把它用来表现文本。

阴影效果

使用 伪元素:before 和 :after 。它们两个都是绝对定位,而且使用负z-index来放置到图片后方实现阴影效果。

3D按钮

利用伪元素结合CSS3 box-shadow 来绘制一个令人吃惊的3D按钮,仅仅使用了CSS和单一的锚文本。伪元素:before 被用来在按钮的左侧添加数字“1”。

叠加图像效果

使用伪元素来仅仅依靠一个图片标签创建一个“凌乱的”叠加图像效果也是可能的。伪元素用于建立一个图片叠加的错觉,通过使用z-index负值使“叠加”的图片在真正的图片后面来实现。

CSS before和after伪元素的更多相关文章

  1. css ::before和::after伪元素的用法

    css ::before和::after伪元素的用法:http://blog.dimpurr.com/css-before-after/

  2. CSS你所不知的伪元素的用法

    你所不知的 CSS ::before 和 ::after 伪元素用法 博客分类: Div / Css / XML / HTML5   CSS 有两个说不上常用的伪类 :before 和 :after, ...

  3. CSS——你所不知的 CSS ::before 和 ::after 伪元素用法(转)

    你所不知的 CSS ::before 和 ::after 伪元素用法 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前 ...

  4. 你所不知的 CSS ::before 和 ::after 伪元素用法

    CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...

  5. css before,after伪元素妙用

    我们知道,css伪元素包括after,before,first-letter等,通过合理的利用伪元素,我们可以让我们的结构更简洁. 通常写法如p::after{content:' '},其中conte ...

  6. CSS ::before 和 ::after 伪元素另类用法

    原文地址:http://justcoding.iteye.com/blog/2032627 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是 ...

  7. CSS ::before 和 ::after 伪元素用法

    CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...

  8. 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式

    最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...

  9. [转]你所不知的 CSS ::before 和 ::after 伪元素用法

    SS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的 ...

随机推荐

  1. bootstrap js插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  2. 理解Javascript 的闭包(closure)

    要理解闭包的概念先从变量的作用域说去 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之 ...

  3. 关于git服务器的搭建

    Git 服务器可搭建在多个系统平台上. 本篇以 Windows 和 Ubuntu 系统为例,简单介绍 Git 服务器的构建. 最后使用 eclipse 的 egit 插件和 git clone 这两种 ...

  4. [BZOJ 2821] 作诗(Poetize) 【分块】

    题目链接:BZOJ - 2821 题目分析 因为强制在线了,所以无法用莫队..可以使用分块来做. 做法是,将 n 个数分成 n/x 个块,每个块大小为 x .先预处理出 f[i][j] ,表示从第 i ...

  5. Gray码 (格雷码) 【二进制】

    以下内容是看了Matrix67的关于二进制的blog(Link)的一点总结与摘录. Gray码,中文“格雷码”,是一种特殊的编码,相邻两个格雷码的二进制表示中有且仅有一位不同,且 n 阶 Gray 码 ...

  6. Gnome Tetravex

    zoj1008:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1008 题目意思是有一个游戏,即给出一个图,该图是由n*n个 ...

  7. Linux 统计文件夹下文件个数

    查看统计当前目录下文件的个数,包括子目录里的. ls -lR| grep "^-" | wc -l Linux下查看某个目录下的文件.或文件夹个数用到3个命令:ls列目录.用gre ...

  8. 【HDOJ】4737 A Bit Fun

    水题.不过题目很有趣儿. #include <cstdio> #define MAXN 100005 int a[MAXN]; int main() { int t, n, m; int ...

  9. Linux&shell 之Shell命令进阶

    写在前面:案例.常用.归类.解释说明.(By Jim) 监控程序a.进程查看ps -ef(-e表示系统上运行的所有进程,-f用于扩展输出一些有用的信息列.)ps -efH(-H参数可以将进程组织为分层 ...

  10. Poetize6: Acting Cute

    3042: Acting Cute Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 59  Solved: 36[Submit][Status] Des ...