使用before和after实现一些有意思的效果实例

本文链接：https://blog.youkuaiyun.com/lhjuejiang/article/details/79807888

主要就是运用before和after在元素前面和后面插入伪元素，实现一些有意思的小效果，嗯、直接上代码了（我展示的都是一些简单的效果，可以在此基础上让效果更炫酷，我觉得只要原理知道了，再去实现其他的效果，就特别简单了，所以此处就不再去修饰了，也方便不太清除原理的同行看代码的时候更简洁）

效果一、鼠标移上链接，出现方括号：

效果图如下：鼠标移入之前和移入之后的对比图

    <style>
        body{padding:100px;}
        .box{width:200px; height:100px; background:#777; line-height:100px; text-align:center;}
        a{position:relative;text-decoration:none; display:inline-block; width:100px; height:30px; background:greenyellow; 
            line-height:30px; text-align:center; color:#fff;}
        a:hover:before,a:hover:after{
            position:absolute;color:red; font-size:20px;
        }
        a:hover:before{content:'['; left:-10px; }
        a:hover:after{content:']'; right:-10px;}

    </style>

<div class="box">
    <a href="#">lalallala</a>
</div>

效果二、出现折纸效果如图：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Demo</title>
    <style>
       body{padding:80px; background:#ccc;}
        .box{position:relative;width:90%; height:auto; padding:20px; background:#fff;}
        p{width:80%; height:100px;}
        .box:before, .box:after{
            content:"";
            z-index:-1;
            display:block;
            position:absolute;
            width:50%;
            height:20%;
            box-shadow:2px 2px 2px #b7b7b7;
            background:#000;
            transform:rotate(-3deg);
            left:10px;
            bottom:15px;
            top:80%;
        }
        .box:after{
            transform:rotate(3deg);
            right:10px;
            left:auto;
        }

    </style>
</head>
<body>
<div class="box">
   <p></p>
</div>

</body>
</html>

效果三、相片叠加效果，如下图

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Demo</title>
    <style>

        .boimg{
            border: 6px solid #fff;
            width: 400px;
            height:225px;
            margin: 50px;
            position: relative;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
        }
        .boimg img{width:100%;heigth:100%;}
        .boimg:before,.boimg:after {
            content: "";
            width: 400px;
            height:225px;
            background: #aaa;
            border: 6px solid #fff;
            position:absolute;
            z-index:-1;
            top:0;
            left:-10px;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
            transform: rotate(-5deg);
        }
        .boimg:after {
            top:5px;
            left:0;
            transform: rotate(3deg);
        }
    </style>
</head>
<body>
<div class="shbox" style="background:none;">
    <div class="boimg">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522834445084&di=376ed78bccfc705f2601b73956199600&imgtype=0&src=http%3A%2F%2Fimg2015.zdface.com%2F20170623%2F25985f40a751689774e53c2e16f266ee.jpg" />
        <div>
        </div>
    </div>
</div>


</body>
</html>

效果四、生成小tip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
        .tip{padding:5px 10px; margin-left:15px; border:1px solid #F8D19F; border-radius:3px; background-color:#FDFBB8; color:#D07807; font-size:12px; position:absolute;}
        .tip:before, .tip:after{content:attr(data-content); font-family:"华文楷体"; position:absolute; top:6px;}
        .tip:before{color:#F8D19F; left:-10px;}
        .tip:after{color:#FDFBB8; left:-8px;}

    </style>
</head>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522834445084&di=376ed78bccfc705f2601b73956199600&imgtype=0&src=http%3A%2F%2Fimg2015.zdface.com%2F20170623%2F25985f40a751689774e53c2e16f266ee.jpg" />
<span id="tip" class="tip" data-content="◀">你好，啦啦啦啦啦啦啦啦</span>
</body>
</html>

注意：上面data-content="◀",其实就是一个Unicode字符图标，所以这句话也相当于data-content="◀"

对于UniCode字符图标，想要了解更多的请点击https://blog.youkuaiyun.com/lhjuejiang/article/details/79818358

效果图如下：（看不清的可以自己复制一下代码在浏览器中查看一下）