有没有纯CSS伪元素写的效果？

Question

有没有纯CSS伪元素写的效果？ 之前在网上看到用纯CSS写成的样式，忘记收藏了，现在再也找不到了

Answer 1

刚受这个帖子启发画了个彩虹：
CSS

    .box {
        position: relative;
        width: 400px;
        height: 160px;
        overflow: hidden;
    }
    .box::before {
        display: block;
        width: 360px;
        height: 300px;
        margin: 60px auto 0;
        border-radius: 100%;
        border: solid 1px white;
        box-shadow: 0 -5px 5px green, 0 -10px 10px yellow, 0 -15px 15px red, 0 -20px 20px yellow, 0 -25px 20px blue;
        content: " ";
    }
    .box::after {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 400px;
        height: 160px;
        background-image: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
        background-image: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
        background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='', endColorstr='#ffffff', GradientType=0);
        content: " ";
    }

html

<div class="box"></div>

效果

Answer 2

刚在慕课网上学了用伪元素写的box—shadow效果，可以去慕课网搜一下box–shadow那个视频