before和after伪元素的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框案例</title>
    <style type="text/css">
 div {
            width: 500px;
 height: 300px;
 border: 1px solid black;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 -o-border-radius: 50%;
 border-radius: 50%;
 font-size: 24px;
 font-weight: bold;
 text-align: center;
 line-height: 300px;
 }

        div:before,
        div:after {
            content: "";
 width: 50px;
 height: 50px;
 display: block;
 border: 1px solid black;
 border-radius: 50%;
 }

    </style>
</head>
<body>
<div>大家好,欢迎来到慕课网!</div>
</body>
</html>

qq_夜_71 2019-06-04

源自：CSS3边框与圆角 1-5 圆角案例

收起

1回答

好帮手慕码 2019-06-05 11:20:43

同学你好！

添加的伪元素默认为行内元素。

（1）selector:before设置在对象前（依据对象树的逻辑结构）发生的内容，其实它应该是在div里面的

（2）因为上面有伪类元素占据一定的位置，所以文字会被挤下去，导致不居中

（3）这个空白是正常的，因为selector:after设置在对象后（依据对象树的逻辑结构）发生的内容；

如果帮助到了你欢迎采纳祝学习愉快~

收起回答

提问者 qq_夜_71 #1

不是都设置了display: block;吗? 怎么还是行内元素?

2019-06-05 14:06:19
好帮手慕码回复提问者 qq_夜_71 #2

同学你好！伪元素默认为行内元素。设置了之后就变成块级了。同学是疑惑为什么在div里面吗？因为它是在对象前插入的，所以会一直在div里面。祝学习愉快~

2019-06-05 14:40:56