关于before，after

<!DOCTYPE html>

<html>

<head>

div{

width: 500px;

height: 300px;

border: 1px solid red;

text-align: center;

line-height: 300px;

-webkit-border-radius:50%;

-moz-border-radius:50%;

-ms-border-radius:50%;

-o-border-radius:50%;

border-radius: 50%;

}

div:before{

content: "";

display: block;

width: 50px;

height: 50px;

border: 1px solid red;

-webkit-border-radius:50%;

-moz-border-radius:50%;

-ms-border-radius:50%;

-o-border-radius:50%;

border-radius: 50%;

}

</style>

</head>

<body>

<div>大家好，欢迎来到慕课网</div>

</body>

</html>

想问一下老师，before，after他是伪类选择器，一般情况下是在元素前面插入新内容，会配合content：“”；这个使用，就是在content：“在这里插入内容”；但是这里是为了有一个新的元素，并且要是一个圆，所以又要使用display：block；这个属性设置是吗，因为我没写display：block，这个时候就出现了一条竖线在“欢迎来到慕课网前面”，在这里就是想问一下老师这些配合在一起使用的作用是啥，他们的作用是什么

中國移动丶移不动 2020-04-17

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

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2020-04-17 11:39:23

同学你好，对于你的问题解答如下：

before、after和content属性结合使用，是为了让伪元素页面中显示出来。
before、after和display:block;属性结合使用，是为了让伪元素表现为块级元素。
因为before和after添加在父元素下的子元素，默认是行内元素，无法设置宽高的，如果不添加display:block;将其转成块级元素，代码中设置的width和height属性无法生效，出现同学说的情况：一条竖线在“欢迎来到慕课网”前面，所以需要结合display:block;属性使用

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

收起回答