CSS（一）伪元素的巧用

作为一门前端er,你肯定熟知 a:hover     a:visited.....我还记得在小本本上记着诀窍：“love 与 hate 纠缠不休”,大家都懂的吧。。。。

       伪类和伪元素都是CSS1和CSS2中的概念，CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同行将:before、:after称为伪类。CSS3对这两个概念做了相对较清晰地概念，并且在语法上也很明显的讲二者区别开。

伪类————pseudo classes

CSS3对伪类的定义
       伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息；任何常规选择器可以在任何位置使用伪类。

CSS3对伪元素的定义
       伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容(比如常见的::before,::after)还可以为伪元素定制样式。。

       伪类用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中;
       CSS3中的伪元素使用两个冒号例如::first-line（当然为了向下兼容，用一个冒号也是可以的，大多数浏览器都支持这两种表示方式。CSS3中新增加的伪元素必须用::）,伪类使用一个冒号例如：hover。

巧用

       所有伪元素能实现的，真实子元素都可以做到。只不过有时候单纯是为了样式和布局就改变html结构，这样的做法不干净，不值得提倡，所以伪元素有了用武之地。

就本文而言，我们将把我们探讨的范围限制在::before 和 ::after这两个伪元素的巧用上。

1. 清除浮动

 #大家最熟悉的巧用
       
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

.clearfix { 
  *zoom:1;
}

2.为元素添加额外的符号

div:before {
 content: open-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ddd;
 float: left;
 position: relative;
 top: 30px;
 border-radius: 25px;
 height: 25px;
 width: 25px;
}
div:after {
 content: close-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ddd;
 float: right;
 position: relative;
 bottom: 40px;
 border-radius: 25px;
 height: 25px;
 width: 25px;
}

3. 接下来重点讲解下结合动画用伪元素实现以下效果

#html代码

    <div class="dynamic-border dynamic-border-1">
        <span></span>
        <img src="../../common/Images/girl.jpg" alt="">
    </div>

#css代码
    *,
    *:before,
    *:after {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    img {
        display: block;
        }
    .dynamic-border {
        position: relative;
        width: 200px;
        height: 200px;
        background: gray;
        margin: 0 auto;
        cursor: pointer;
        }
            
    .dynamic-border:before,
    .dynamic-border:after,
    .dynamic-border span:first-child:before,
    .dynamic-border span:first-child:after { 
        content: "";
        position: absolute;
        background: red;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        }
    /*上边*/
    .dynamic-border:before {
        width: 0;
        top: -2px;
        right: 0;
        height: 2px;
        }
    /* 右边*/
    .dynamic-border:after {
        width: 2px;
        height: 0;
        right: -2px;
        bottom: 0;
        }
    /*下边 */
    .dynamic-border span:first-child:before {
        width: 0;
        height: 2px;
        bottom: -2px;
        left: 0;
        }
    .dynamic-border span:first-child:after {
        width: 2px;
        height: 0;
        top: 0;
        left: -2px;
        }
    .dynamic-border:hover:before,
    .dynamic-border:hover span:first-child:before { 
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        }
            
    .dynamic-border:hover:before,
    .dynamic-border:hover span:first-child:before {
        width: calc(100% + 2px);   
        }
        
    .dynamic-border:hover:after,
    .dynamic-border:hover span:first-child:after {
        height: calc(100% + 2px);
        } 

解析

Q:原理图?

Q1:为什么要在htm标签中添加额外的标签<sapn>,而不用img::before?

img不支持元素::before和::after

Q2:为什么要为所有元素设置box-sizing: border-box;?

为使得calc(100%)计算值正好等于图片的总宽高值，而不是内容的宽高值

Q3:为什么要设置transition-delay: .2s;

以原理图中右下方.dynamic-border::after：为例，由于左下方span:after的动画持续时间为.2s，所以设置.dynamic-border::after：transition-delay: .2s使得动画平稳过渡更好地衔接sapn:after;

Q1:cal(100% + 2px)?

2px为红色边框宽度，注意+号前后必须要有空格