css -- js动态改变before和after_js 调用 css中的before与after-CSDN博客

本文链接：https://blog.csdn.net/qq_15241071/article/details/80977893

before和after也算是css里面最常见的元素了，而我却一直不太了解，再不学一下就真的太不像话了。所以学习一下，记记笔记。

1. before && after

伪元素，也可以解释为虚拟元素，就是为当前元素增加装饰效果，它们不会出现在dom树，它们显示的是'content'属性，默认为内联元素。

它们无法在document中被找到，无法设置点击等事件，但是可以捕获事件。

获取它们的方法是通过css的接口获取。需要用的时候再进行查阅。

before和after技术上是一样的，只是位置不一样，一前一后装饰元素。

2. 实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>before&after</title>
    <style>
        body{
            padding: 80px;
            background: #ccc
        }
        .box{

            border-radius: 121%;
            height: 433px;
            width: 500px;
            background-image:
                    linear-gradient(0deg,#fff 16%, #0ae 17%,#0ae 33%, #fff 34%,#fff 66%,
                    #0ae 67%,#0ae 83%, #fff 84%);
            background-repeat:repeat;
            background-size:50px 50px, 50px 50px;

            background-position: 20% 20%, 45% 30%
          
        }
        .box:before, .box:after{
            content: "";
            position: absolute;
            width: 134px;
            height: 18%;
            box-shadow: 2px 2px 2px #b7b7b7;
            background: #63b1b1;
            transform: rotate(-3deg);
            left: 168px;
            top: 29%;
            border-radius: 50%;
        }
        .box:after{
            transform: rotate(3deg);
            left: 369px;
        }
    </style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

效果图，画了一个木乃伊，本来想画蜘蛛侠的。。。

哪怕这是个很简单的图，也感受到了用css画图和做动画有点酷炫，以后可以常常练手。

2018-7-14更新

今天遇到了一个问题，有个元素是用js append到界面上，这个元素怎么给它加content呢，我在css里面写了一个

class:before这种，append元素后addClass也没作用，js无法操作before和after这类不存在在dom里面的元素。在网上找到一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,div,p,a{margin: 0;padding: 0;}
        body{background: #00AA88}
        div{
            /*外面框框的div样式*/
            width: 200px;
            position: relative;
            overflow: hidden;
            height: 150px;
        }
        a{ display: inline-block; }
        a:before,a:after{
            /*动态加载的元素*/
            content:"";
            display: inline-block;
            position: absolute;
            width: 70%;
            height:100%;
            transform: skewX(20deg);
            background: #fff;
            opacity: 0.3;
            transition: all .3s linear;
            top:0;
        }
        p{
            /*里面框的样式*/
            background: #003eff;
            display: inline-block;
            width: 200px;
            height: 150px;
        }

    </style>
</head>
<body>
<div id="d1" class="w">
    <a id="i" href="#" class="a1">
        <p></p>
    </a>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    var b=$("a:before");
    var a=$("#i");
    a.hover(function () {
        $('<style>a:before{left:-20%;} a:after{right:-20%;} </style>').appendTo('head')//这里写body也可以
    },function () {
        $('<style> a:before{  left:-100%; } a:after{  right:-100%;  } </style>').appendTo('head')//这里写body也可以
    })
</script>
</body>
</html>

确实实现了把before和after动态改变，只是会往head(或者body)里面一直添加<style>标签，这肯定是不符合实际项目使用的，另外，js代码里面，a.hover(fn, fn)是what？查了一下jquery API，不仅又深刻反省自己的水平：

刚刚试验了一下，append了元素然后addClass是可行的，之前不行，可能是公司的项目太复杂了把我整懵了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{background: #00AA88}

        .test:before{
            /*动态加载的元素*/
            content:"哈哈哈哈";
        }
        .test:after{
            content: "嘻嘻嘻嘻";
        }
    </style>
</head>
<body>
<button οnclick="addBefore()">点击我</button>


</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    function addBefore() {
        $('body').append('<div style="height: 100px;background-color: plum" id="aaa"></div>')
        $('#aaa').addClass('test');
    }
</script>
</body>
</html>