CSS3选择器 ::before和::after，十天精通CSS3教程-慕课网

CSS3选择器 ::before和::after

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

.clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

当然可以利用他们制作出其他更好的效果，比如右侧中的阴影效果，也是通过这个来实现的。

关键代码分析：

.effect::before, .effect::after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

上面代码作用在class名叫.effect上的div的前（before）后(after)都添加一个空元素，然后为这两个空元素添加阴影特效。

想看这个知识点深入讲解的小伙伴请观看《css3实现图片阴影效果》中的第1-6小节。

任务

?不会了怎么办

问答
评论
笔记
资料下载
代码

全部精华我要发布

为什么这个类没有效果？把类换成“div”却可以

已采纳回答 / 慕田峪8131879

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>...

3 回答 633 浏览

2022-08-09

写了z-index：-1；但是没有效果

最新回答 / why2551140

background:pink 不能在z-index后面吧

1 回答 859 浏览

2022-04-28

top:50%; bottom:0; 这两个在一起是什么意思

最新回答 / 漠里

没有设置高度，会根据这两个值计算出高度

2 回答 1199 浏览

2020-12-15

z-index:-1 是什么意思

最新回答 / 小鱼鱼同学

你把它理解成一个层叠效果就好了 z-index:-1;就是在平面的下面一层

3 回答 10591 浏览

2020-04-04

感觉像是根据DIV中的内容定位

最新回答 / 法师流浪1113

你感觉很准

1 回答 1370 浏览

2017-12-10

这段代码是怎么清除浮动的看不懂

最新回答 / 麓鹿不迷路

其实要想清楚.clearfix的浮动，就写下面的代码就足够了.clearfix::after { content: ""; //可以是空串，但不能不写 display: block; //只有作为块级元素才能清除浮动 clear:both; //清除左浮动和右浮动，只清除左浮动就写clear:left，右同理}

2 回答 1652 浏览

2018-06-09