html+css使用伪元素给图片添加鼠标经过显示边框

1、首先，打开Sublime Text，新建一个新html文件，写好html基本结构。如图：

3、接着，在head区域中，插入css样式，用来美化以及添加效果，并写入图片的大小。如图：

5、接着，完成后，使用浏览器打开，然后在页面右键撮劝丛食单击，在弹出的下拉框中选择检查（谷歌浏览器），预览下效果，看是否添加伪元素成功，如果出现伪元素，就说明成功了。如图：

7、接着，给边框加上定位，使得边框跟图片重合在一起，并且浮在图片的上方。如图：

9、接着，继续在伪元素样式中添加样式美化，使边框的大小与图片的大小一致。如图：

11、至此，html+css使用伪元素给图片添加鼠标经过显示边框教程分享结束。