为什么在before和after里面去掉position：absolute后会是没有小圆心？
<!DOCTYPE html>
<html>
<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: 90px solid red;
top: 100px;
}
div:after{
content: "";position: absolute;
width: 20px;height: 20px;
background: yellow;
border-radius: 50%;
border: 90px solid blue;
right: 0;top: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
为什么在before和after里面去掉position：absolute后会是没有小圆心？
正在回答
同学你好，before和after是内联元素，不支持宽高属性，也就说代码中给before和after设置的宽高是不生效的。设置了绝对定位之后，会把before和after转换为块元素，块元素是支持宽高属性的，也就可以看到小圆心了。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星