玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[5+3时代]

浏览数：21 / 时间：2015年06月09日

1.博客背景

在我的上一篇博客中，很多园友提出说对css3"画图"不是很理解，在跟他们私聊了一段时间以后，加上自己在开始自学css3的时候的疑惑，我觉得大家之所以不是很理解主要是因为对伪元素不太了解，介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after，写这篇博客主要也是为了起到一个敲门砖的作用，所以本篇博客主要是讲::before 和 ::after。那么就让我们一起来聊聊伪元素吧。

2.CSS历史

伪元素实际上在CSS1(CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订)中就存在了，只不过在后来的浏览器争霸时代发生了很多的演变。。在最初，伪元素的语法是使用“:”（一个冒号），随着web的发展，在CSS3中修订后的伪元素使用“::”（两个冒号），也就是::before 和 ::after—以区分伪元素和伪类（比如:hover，:active等）。不过索性无论你写一个冒号还是两个冒号，浏览器都将能识别它们。由于IE8(千疮百孔的IE你不懂，现在觉得最应该致敬的是那些做web开发还需要兼容IE6的程序猿们)只支持单冒号的格式，安全起见如果你想要更广泛的浏览器兼容性那么还是使用单冒号的格式吧！

3.伪元素概念

相信到这很多人都不知道伪元素到底是干嘛的？它的作用到底是做什么的，下面就让我们一起来揭开伪元素的神秘的面纱，探索伪元素背后那不为人知的故事。

技术分享
伪元素直义理解就是"假元素"或者"伪装元素"。其实也可以这么理解，伪元素实际上就是虚拟的元素，不存在的元素(code形式), 你也无发在文档中找到他们，因此说伪元素是虚拟元素。

4.伪元素作用

尽管作为“虚假”的元素，事实上伪元素表现上就像是“真正”的元素，我们能够给它们添加任何样式，比如改变它们的颜色、添加背景色、调整字体大小、调整它们中的文本等等。CSS 伪元素主要用于向某些选择器设置特殊效果。

5.伪元素用法

好了，标准的博客流程(就是前奏得揍很久，一大堆各种乱八七糟的介绍，其实我也不喜欢这些东西，但是为了向园子的大神们看近，也增加大家对伪元素的理解。 so，我们也走了一遍流程。)已经走完了。下面让我们一起来看看伪元素的用法

5.1简单例子

首先通过一个最最简单的例子，来告诉大家:before和:after到底是个什么东东。

<style>
    .cnblogsDemo1:before {
            content: ‘向钱看‘;
        }

/*****  原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou  ******/

.cnblogsDemo1:after { content: ‘向厚看‘; } </style> <div class="cnblogsDemo1"> 这里1 </div>

效果：

技术分享

运行效果是：向钱看这里向厚看，而且"向钱看"/"向厚看"实际上是不存在的，而且这种虚假的元素在页面(测试的是谷歌浏览器)上.是无法直接复制的, 我们只是通过伪元素实现了这个"向钱看"/"向厚看"。相信看到这里大家对伪元素心里已经有了一个概念了，其实在伪元素里，我们不光可以"向钱看"/"向厚看"，我们可以通过伪元素做很多事情。

5.2水滴例子

比如我们简单实现一个水滴(比如百度地图上标记你当前位置的图标)的效果, 实现水滴效果呢我们分为三步走。

5.2.1首先实现画一个圆形

<style>
span {
            height: 40px;
            width: 40px;
            display: block;
            position: relative;
        }
.cnblogsDemo2 {
            height: 26px;
            width: 26px;
            border-radius: 40px;
            -webkit-border-radius: 40px;    /* Safari and Chrome */
            -moz-border-radius: 40px;       /* Firefox */
            background: #333;

/*****  原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou  ******/

        }
</style>
<span class="cnblogsDemo2">
        
</span>

效果:

技术分享

5.2.2实现画一个三角形

<style>
.cnblogsDemo3 {
            height: 0px;
            width: 0px;
            border: 10px transparent solid;
            border-top-color: #333;
            border-width: 15px 10px 0px 10px;
        }
</style>
<span class="cnblogsDemo3">

</span>

/*****  原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou  ******/

效果：

技术分享

5.2.3水滴实现

可能到这里很多园友都感觉到讲圆形和三角形有机结合的话其实就是一个水滴的效果，没错，在有:before和:after的帮助下，我们想实现水滴效果就非常简单了，只需要将二者有效的结合。

<style>
span {
            height: 40px;
            width: 40px;
            display: block;
            position: relative;
        }
.cnblogsDemo4 {
            width: 26px;
        }

            .cnblogsDemo4:before {
                content: ‘4‘;
                height: 26px;
                width: 26px;
                display: block;
                position: absolute;
                top: 2px;
                left: 0px;
                z-index: 1;
                line-height: 26px;
                background: #333;
                border-radius: 40px;
                -webkit-border-radius: 40px;
                -moz-border-radius: 40px;
                color: #fff;
                text-align: center;
            }

            .cnblogsDemo4:after {
                content: ‘‘;
                height: 0px;
                width: 0px;
                display: block;
                position: absolute;
                bottom: 2px;
                left: 3px;
                border: 10px transparent solid;
                border-top-color: #333;
                border-width: 15px 10px 0px 10px;
            }
</style>
<span class="cnblogsDemo4">
    </span>