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代码后使用刷新浏览器即，把鼠标放到小圆圈上即可看到大圆背景色变为红色。