这个伪元素怎么显示不出来啊

来源：2-14 项目作业

铁锅炖大大鹅

2019-09-25 11:45:39

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
   <div class="sky">
       <div class="firstCloud"></div>
       <div class="secondCloud"></div>
       <div class="thirdCloud"></div>
       <div class="fourthCloud"></div>
       <div class="fifthCloud"></div>
   </div>
   <div class="grass"></div>
</body>
</html>

*{
    margin: 0px;
    padding: 0px;
}
.sky{
    width: 100%;
    height: 600px;
    background:linear-gradient(rgb(196, 228, 253) 0%,rgb(255, 255, 255) 90% );
    position: relative;
}
.grass{
    width: 100%;
    height: 400px;
    background: linear-gradient(rgb(255, 255, 255) 0%,rgb(148, 190, 89) 100%);
}
.firstCloud{
    width: 200px;
    height: 50px;
    background-color: #FFFFFF;
    border-radius: 20px;
    position: absolute;
    top: 120px;
    z-index: 1;
}
.firstCloud :before{
    content: "";
    width: 100px;
    height: 100px;
    border-radius: 50%;
    z-index: 2;
    background-color: #FFFFFF;
}
.firstCloud :after{
    content: "";
    width: 100px;
    height: 50px;
    border-radius: 20px;
    z-index: 2;
    background-color: #FFFFFF;
}

写回答

1回答