CSS伪类(pseudo class)简明介绍之:before和:after

日期：2012-4-26  来源：GBin1.com

在线演示   本地下载   在线调试

如果大家经常关注互联网新网站和应用的话，或者你喜欢收集不同的网站模板，你会发现越来越多的网站模板或者网站在使用CSS伪类 - pseudo class。

今天我们这里给大家简单介绍伪类中经常使用的俩个:before和:after。希望大家能够觉得有帮助！

如果你喜欢我们的文章，或者有任何问题，请给我们留言，谢谢！

什么是伪类(pseudo class)？

pseudo这个单词来源于希腊语的音译，意思是虚构的，假的，或者伪的意思。因此这里不难理解为什么我们称之为伪类。

和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。

因此大家需要注意一下几点：

• 它们不是真正的元素，对于很多情况下，大家不用用它展示实际意义的内容，尽量用它显示修饰性内容或者设计性内容，例如，图标
• 要知道有些相关的开发工具，例如著名的开发工具firebug根本就不显示任何的伪类生成内容，如果你使用的话，你知道后果的！你将陷入盲目的debug中。当然你使用Chrome可以看到样式，但是在DOM看不到元素。

什么时候使用伪类(pseudo class)？

如果你需要创建一些修饰类图标，或者设计UI的时候，使用伪类是相当方便的，大家可能还记得那篇分享一个纯CSS开发的气泡式提示框 文章吧，一个非常准确的使用场景。

支持的浏览器

• Chrome 2+
• Firefox 3.5+ (FF3.0支持部分),
• Safari 1.3+
• Opera 9.2+
• IE8+ 
• 手机上的浏览器

基本使用方法

如果我们有一个链接元素，如下：

<a href="http://www.gbin1.com" id="gbin1">GBIN1</a>

如果我们定义了相关的CSS，如下：

#gbin1{
  font-size: 12px
  background: #202020
}

我们使用:before生成当前元素前面的伪元素样式和内容，这里我们需要使用content属性，注意我们可以使用文字类，或者图片，如下：

#gbin1:before{
    content: url("images/gbin1icon.png");
}

我们使用:after生成此元素后面内容的样式和内容，如下：

#gbin1:after{
    content: attr(href);
}

上面例子可以看到，我们使用content生成伪对象内容，使用的是一个图片作为元素内容，如果你不使用content对象，伪类基本没有任何使用价值。

.....

来源：CSS伪类(pseudo class)简明介绍之:before和:after