CSS（一）伪元素的巧用

entner 发布于2019-08-30 15:53 / 1910人阅读

摘要：并且，一些伪元素可以使开发者获取到不存在于源文档中的内容比如常见的还可以为伪元素定制样式。。中新增加的伪元素必须用伪类使用一个冒号例如。就本文而言，我们将把我们探讨的范围限制在和这两个伪元素的巧用上。

作为一门前端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: #ffffd;
 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: #ffffd;
 float: right;
 position: relative;
 bottom: 40px;
 border-radius: 25px;
 height: 25px;
 width: 25px;
}

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

#html代码

    
        
        
    

#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标签中添加额外的标签,而不用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为红色边框宽度，注意+号前后必须要有空格

云服务器 GPU云服务器巧用CSS的MASK滤镜伪元素获取伪元素 css元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116616.html

Proxy 的巧用

摘要：为了保证的可读性，本文采用意译而非直译。对象的所有用法，都是上面的这种形式。其中用来生成实例，是表示所要拦截的对象，是用来定制拦截行为的对象。虽然不同的创建模式支持类似的功能，但无法用隐式初始值包装对象。为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ Proxy 介绍使用Proxy，你可以将一只猫伪装成一只老虎。下面大...

feng409 2019-08-26 10:10 评论0 收藏0
Proxy 的巧用

摘要：为了保证的可读性，本文采用意译而非直译。对象的所有用法，都是上面的这种形式。其中用来生成实例，是表示所要拦截的对象，是用来定制拦截行为的对象。虽然不同的创建模式支持类似的功能，但无法用隐式初始值包装对象。为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ Proxy 介绍使用Proxy，你可以将一只猫伪装成一只老虎。下面大...

FreeZinG 2019-08-16 18:36 评论0 收藏0
异或运算的巧用 → 不用额外的变量，如何交换两个变量的值？

摘要：开心一刻两头奶牛在一起吃草，其中一头奶牛甲越吃越慢，一副若有所思的模样，另一头奶牛奶牛乙发觉了，开始了对话奶牛乙搁那合计啥呢奶牛甲你帮我合计合计奶牛乙咋地了奶牛甲我吃的是草，挤出来的是奶，也就是说我把没用的变成有用的了奶牛乙是这个事奶牛甲人开心一刻　　两头奶牛在一起吃草，其中一头（奶牛甲）越吃越慢，一副若有所思的模样，另一头奶牛（奶牛乙）发觉了，开始了对话　　奶牛乙：搁那合计啥呢？　　奶牛甲...

不知名网友 2021-11-29 10:50 评论0 收藏0
CSS3-transition常用属性及示例

摘要：主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，解释下注意值可以中定义自己的值，如过渡效果开始前的延迟时间，单位秒或者毫秒与的巧用示例元素上浮示例元素上浮后续还会继续补充，真心强大transition参数语法 transition: property duration timing-function delay transition属性是个复合属性，她包括以下几个子属性： ...

derek_334892 2019-04-23 13:41 评论0 收藏0
巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

摘要：那想要优化这一点，唯一的方法就是利用内容高度来撑开而非，这个方案跟消除浮动所用的方案非常相似给容器添加一个子元素伪元素，并把子元素伪元素的设为，使其实际高度相当于容器的宽度，如此一来，便能把容器的高度撑至与宽度一致了。一个基础却又容易混淆的css知识点本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是t...

wenzi 2019-08-28 18:28 评论0 收藏0