css - 为什么要加before，有何作用？-PHP中文网问答

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>loading</title>
    <style>
        .loader { 
            position: relative;
            margin: 0 auto;
            width: 100px;/*改变这个值可以改变loading大小*/

        }

        .loader:before {
            content: '';
            display: block;
            padding-top: 100%;
        }

        .circular {
            -webkit-animation: rotate 2s linear infinite;
            -o-animation: rotate 2s linear infinite;
            animation: rotate 2s linear infinite;
            height: 100%;
            transform-origin: center center;
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        .path {
            stroke-dasharray: 1,200;
            stroke-dashoffset:0;
            -webkit-animation: dash 1.5s ease infinite , color 6s ease infinite;
            -o-animation: dash 1.5s ease infinite , color 6s ease infinite;
            animation: dash 1.5s ease infinite , color 6s ease infinite;
            stroke-linecap: round;
        }

        @keyframes rotate {
            100%{
                transform: rotate(360deg);
            }
        }

        @keyframes dash {
            0%{
                stroke-dasharray: 1,200;
                stroke-dashoffset:0;
            }
            50%{
                stroke-dasharray: 89,200;
                stroke-dashoffset:-35px;
            }
            100%{
                stroke-dasharray: 89,200;
                stroke-dashoffset:-124px;
            }
        }

        @keyframes color {
            100%,0%{
                stroke: red;
            }
            40%{
                stroke: blue;
            }
            60%{
                stroke: green;
            }
            90%{
                stroke: yellow;
            }
        }
    </style>
</head>
<body>
    <p class="loader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" ></circle>
        </svg>
    </p>
</body>
</html>

这是一个loading的svg图，不理解其中.loader:before 的作用，求大神解答。

<p class="loader"> <p class="before"> <svg class="circular" viewBox="25 25 50 50"> <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2"></circle> </svg> </p> </p> .before { padding-top: 100%; }

全部回复(4)

巴扎黑2017-04-17 13:59:21 4楼

:before 绑定到loader上的伪元素，可以不要但是loader样式就得加上高度
这里的before是为了占位，等同于