js 动态修改_after_before伪元素content值

最新推荐文章于 2024-04-22 17:40:03 发布

令月十一

最新推荐文章于 2024-04-22 17:40:03 发布

阅读量518

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_44234050/article/details/131581094

版权

通过css的attr获取绑定的数据

<div id="box" data-content-before=":before" data-content-after=":after">box盒子</div>

<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        padding: 0;
        margin: 0;
    }
    #box{
        width: 200px;
        height: 200px;
        position: fixed;
        top: calc(50% - 100px);
        left: calc(50% - 100px);
        background: #0877FF;
        border-radius: 10px;
        text-align: center;
        box-shadow: 1px 2px 3px -1px;
    }
    #box:after{
        content: attr(data-content-after);
        position: relative;
        top: -120px;
        left: -160px;
        width: 104px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border-radius: 10px;
        background: orange;
        box-shadow: 1px 2px 3px -1px;
        display: block;
    }
    #box:before{
        content: attr(data-content-before);
        position: relative;
        top: 0;
        right: -260px;
        width: 104px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border-radius: 10px;
        background: #39c778;
        box-shadow: 1px 2px 3px -1px;
        display: block;
    }
</style>