使用伪元素before和after写出来的神奇效果

大家都知道before和after能写出很多很好的效果，今天偶然看到一个觉得挺好的，就顺便写了一下，复习了一下伪元素以及和伪类的区别，domo地址：http://codepen.io/tianzi77/pen/KpeKXz

伪类和伪元素看似简单，很多开发者并没有引起注意，先看看伪元素和伪类的区别吧。

标准的定义：

CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。

伪类有：:first-child :link:vistited，:hover，:active，:focus，:lang

伪元素有：:first-line，:first-letter，:before，:after

伪类与伪元素的区别

先看一个伪元素 first-line 例子。现在有一段HTML，内容是一个段落：

<p>I am the bone of my sword. Steel is my body, and fire is my blood.  I have created over a thoustand blades.
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon.  Yet, those hands will never hold anything. So as I pray, unlimited blade works. </p>  

如果我要描述这个段落的第一行，在不用伪元素的情况下，我会怎么做？想来我一定要嵌套一层 span，然后加上类名:

<p><span class="first-line">I am the bone of my sword. Steel is my body, and fire is my blood. </span>
I have created over a thoustand blades.
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon.  Yet, those hands will never hold anything. So as I pray, unlimited blade works. </p>  

再反观一个伪类 first-child 的例子，有一个简单的列表：

<ul> <li></li> <li></li> </ul> 如果我要描述 ul 的第一个元素，我无须嵌套新的元素，我只须给第一个已经存在的 li 添加一个类名就可以了：

<ul> <li class="first-child"></li> <li></li> </ul>  

尽管，第一行和第一个元素，这两者的语意相似，但最后作用的效果却完全不同。所以，伪类和伪元素的根本区别在于：它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。而这也是为什么，标准精确地使用 “create” 一词来解释伪元素，而使用 “classify” 一词来解释伪类的原因。一个描述的是新创建出来的“幽灵”元素，另一个则是描述已经存在的符合“幽灵”类别的元素。

伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。

伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

再看看demo中具体的实现吧。

html结构很简单

    <a href="/" id="npm-loves-you">
        holi,i love you
      </a>

css样式：

        /*设置a标签的位置和文字颜色，相对定位的原因是下文伪元素的效果用到了绝对定位*/
        #npm-loves-you {
            margin-left: 100px;
            margin-top: 80px;
            display: inline-block;
            color: rgba(0, 0, 0, 0.4);
            text-decoration: none;
            position: relative;
        } 

        /*利用css before和after伪元素添加心形效果并设置动画*/
        #npm-loves-you:before,
        #npm-loves-you:after {
            content: "\2665";
            color: rgba(203, 56, 55, 0);
            font-size: 14px;
            transition: all 0.3s;
            transform: translate3d(0, 0, 0);
            position: absolute;
            top: 1px;
        }
       /*鼠标没有hover上去之前对before和after中的内容进行定位*/
        #npm-loves-you:before {
            left: -10px;
        }

        #npm-loves-you:after {
            right: -10px;
        }

        #npm-loves-you:hover {
            color: #cb3837;
        }
        /*hover上去之后设置content的颜色*/
        #npm-loves-you:hover:before,
        #npm-loves-you:hover:after {
            color: #cb3837;
        }
        /*鼠标hover时设置位置*/
        #npm-loves-you:hover:before {
            left: -15px;
        }

        #npm-loves-you:hover:after {
            right: -15px;
        }

前端之路，任重道远！

版权声明：本文为博主原创文章，未经博主允许不得转载。