css的:hover与after\ before 一起使用

1、新建一个html代码页面，然后创建一个div标签，同是给这个div添加一个class类(案例中类名为test)

2、设置test类显示为一个小圆

css样式代码：

.test{

width: 50px;

height: 50px;

border-radius:100%;

border:1px solid #ccc;

background-color: #fff;

margin:50px auto;

position: relative;

}

3、保存html代码后使用浏览器打开，即可看到浏览器页面上显示一个小圆

4、回到html代码页面，使用:before为test类添加一个大圆圈

5、保存html代码后刷新浏览器，在浏览器上即可看到小圆圈外显示一个大圆圈

6、回到html代码页面，使用hover设置鼠标滑过后大圆圈的背景为红色

7、保存html代码后使用刷新浏览器即，把鼠标放到小圆圈上即可看到大圆背景色变为红色。