老师为什么我制作过程中如果不在before或after设置定位就不会出现内容？

<!DOCTYPE html>

<html>

<head>

div {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

box-sizing: border-box;

width: 400px;

height: 400px;

margin: auto;

border: 1px solid red;

border-bottom: 200px solid red;

border-radius: 50%;

transform-origin: 50% 50%;

animation-name: rotate;

animation-duration: 5s;

animation-timing-function: linear;

/*此处写代码*/

animation-delay:0s;

animation-iteration-count:infinite;

}

@keyframes rotate{

from{transform:rotate(0deg);}

to{transform:rotate(360deg);}

}

div:before{

content:" ";

width:20px;height:20px;position: absolute;

background:white;

border: 90px solid red;

border-radius: 50%;

top: 100px;

}

div:after{

content:"";

width: 20px;height: 20px;position: absolute;

background: red;

border: 90px solid white;

border-radius: 50%;

right: 0px;top: 100px;

}

</style>

</head>

<body>

</body>

</html>

大白前端 2020-02-20

源自：CSS3动画 2-17 编程练习

收起

2回答

好帮手慕粉回答被采纳获得+3积分 2020-02-20 18:28:09

同学你好，是的，因为伪元素是行内元素，不能设置宽高，在设置了绝对定位后就变成了块级元素，就可以设置宽高看到中心小圆了。

如果我的回答帮助了你，欢迎采纳，祝学习愉快~

收起回答

好帮手慕粉 2020-02-20 15:30:51

同学你好，因为同学只有设置定位才能将内容定位到合适的地方呀，我们可以先将定位去掉，查看下伪元素的位置：

加上定位和定位值以后，才能设计出我们想要的效果，定位在我们后期的学习中是经常用到的。

如果我的回答帮助了你，欢迎采纳，祝学习愉快~

收起回答

提问者大白前端 #1

但是你没发现不在before和after里加position的话得到的圆圈没有中心小圆吗？像这样 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2-5</title> <style type="text/css"> div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; width: 400px; height: 400px; margin: auto; border: 1px solid red; border-bottom: 200px solid red; border-radius: 50%; transform-origin: 50% 50%; animation-name: rotate; animation-duration: 5s; animation-timing-function: linear; /*此处写代码*/ animation-delay: 2s; animation-timing-function: 2s; animation-iteration-count: infinite; } @keyframes rotate{ from{transform: rotate(0deg);}to{transform: rotate(0deg);} } div:before{ content: ""; width: 20px;height: 20px;position: absolute; background: black; border-radius: 50%; border: 50px solid red; } </style> </head> <body> <div></div> </body> </html>

2020-02-20 16:39:23