最新消息:欢迎加入小松的QQ群一起讨论一起学习,本站启用小松自己写的redis缓存,文章发布修改自动删除缓存,现在速度杠杠的

常见的:Before和:After伪元素

前端技术 181浏览 0评论

目前css3中伪元素共有5个 分别是:first-line, :first-letter, :selection, :before 和 :after,前面三个伪元素我目前没有看到过,可能是我不是做前端的,没有怎么注意。:before :after在实际去开发中遇到的挺多的。本文主要讲一下:before :after两个伪元素

什么是伪元素

伪元素,就是本身不存在的页面元素,HTML代码里并没有这样的元素,但在页面显示时,你却能看到这些本来不存在的元素发挥着作用

伪元素发展过程

早在CSS1里就已经有了伪元素的概念,:before 和 :after 这两个伪元素,是在CSS2.1里新出现的,起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before 和 ::after
不论你使用单冒号还是双冒号语法,浏览器都能识别。因为IE8只支持单冒号的语法,所以,如果你想兼容IE8,保险的做法是使用单冒号

:before 和 :after 举例与使用方法

QQ截图20160530092602

<style type="text/css">
body{
                font-family: cursive;
                font-size: 14px;
            }
            .left{
                width:150px;
                height: 50px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 50px;
                text-align: center;
                border: 2px solid green;
                border-radius: 5px;
            }
            .left:before{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left: -30px;
                top: 10px;
                border: 15px solid;
                border-color: transparent green transparent transparent;
            }
            .left:after{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left: -27px;
                top: 10px;
                border: 15px solid;
                border-color: transparent #fff transparent transparent;
            }

            .right{
                width:150px;
                height: 50px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 50px;
                text-align: center;
                border: 2px solid green;
                border-radius: 5px;
            }
            .right:before{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                right: -30px;
                top: 10px;
                border: 15px solid;
                border-color: transparent transparent transparent green;
            }
            .right:after{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                right: -27px;
                top: 10px;
                border: 15px solid;
                border-color: transparent transparent transparent #fff;
            }

            .up{
                width:150px;
                height: 50px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 50px;
                text-align: center;
                border: 2px solid green;
                border-radius: 5px;
            }
            .up:before{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left:60px;
                top: -30px;
                border: 15px solid;
                border-color: transparent transparent green transparent ;
            }
            .up:after{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left:60px;
                top: -27px;
                border: 15px solid;
                border-color: transparent transparent #fff transparent;
            }

            .down{
                width:150px;
                height: 50px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 50px;
                text-align: center;
                border: 2px solid green;
                border-radius: 5px;
            }
            .down:before{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left:60px;
                top: 50px;
                border: 15px solid;
                border-color: green transparent transparent transparent ;
            }
            .down:after{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left:60px;
                top: 48px;
                border: 15px solid;
                border-color: #fff transparent transparent transparent ;
            }

            .line{
                width:150px;
                height: 50px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 50px;
                text-align: center;
                border: 2px solid green;
                border-radius: 5px;
            }

            .line:before{
                border-bottom: 1px solid #3ca156;
                -webkit-transform: skewY(30deg);
                transform: skewY(30deg);
                content: '';
                width: 92px;
                position: absolute;
                left: 30px;
                top: 50%;
            }

            .line:after{
                border-bottom: 1px solid #3ca156;
                -webkit-transform: skewY(-30deg);
                transform: skewY(-30deg);
                content: '';
                width: 92px;
                position: absolute;
                left: 30px;
                top: 50%;
            }

            .fork{
                color: #fff;
                width:150px;
                height: 60px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 60px;
                text-align: center;
                background: green;
            }
            .fork:before{
                content: "";
                border: 30px solid;
                border-color: transparent transparent transparent #fff;
                position: absolute;
                top: 0px;
                left: 0px;
            }

            .fork:after{
                content: "";
                border: 30px solid;
                border-color: transparent transparent transparent green;
                position: absolute;
                top: -0px;
                right: -60px;
            }

            .fork-left{
                color: #fff;
                width:150px;
                height: 60px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 60px;
                text-align: center;
                background: green;
                border-radius: 5px;
            }
            .fork-left:before{
                content: "";
                border: 30px solid;
                border-color: transparent transparent transparent #fff;
                position: absolute;
                top: 0px;
                left: 0px;
            }

            .fork-right{
                color: #fff;
                width:150px;
                height: 60px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 60px;
                text-align: center;
                background: green;
                border-radius: 5px;
            }

            .fork-right:after{
                content: "";
                border: 30px solid;
                border-color: transparent #fff transparent transparent;
                position: absolute;
                top: 0px;
                right: 0;
            }

            .fork-up{
                color: #fff;
                width:60px;
                height: 150px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 150px;
                text-align: center;
                background: green;
                border-radius: 5px;
            }
            .fork-up:after{
                content: "";
                border: 30px solid;
                border-color: transparent  transparent #fff transparent;
                position: absolute;
                top: 90px;
                right: 0;
            }

            .fork-down{
                color: #fff;
                width:60px;
                height: 150px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 150px;
                text-align: center;
                background: green;
                border-radius: 5px;
            }
            .fork-down:before{
                content: "";
                border: 30px solid;
                border-color: #fff transparent  transparent  transparent;
                position: absolute;
                top: 0;
                right: 0;
            }
</style>
<div class='left' style="float:left">left</div>
<div class='right' style="float:left">right</div>
<div class='up' style="float:left">up</div>
<div class='down' style="float:left">down</div>
<div class='line' style="float:left">line</div>
<div class='fork'style="float:left">fork</div>
<div class='fork-left'>fork-left</div>
<div class='fork-right'>fork-right</div>
<div class='fork-up'>fork-up</div>
<div class='fork-down'>fork-down</div>
QQ交流群:136351212

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» 常见的:Before和:After伪元素
本文链接地址:https://www.phpsong.com/2460.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!