礼悟：
公恒学思合行悟，尊师重道存感恩。叶见寻根三返一，江河湖海同一体。
虚怀若谷良心主，愿行无悔给最苦。读书锻炼养身心，诚劝且行且珍惜。
ide：visual studio 2017
browser：Chrome
os：win7
代码
<!DOCTYPE html><html><head> ???<meta charset="utf-8" /> ???<meta name="author" content="https://www.cnblogs.com/jizuiku"/> ???<title></title> ???<style type="text/css"> ???????div { ???????????height:100px; ???????????width:100px; ???????????background-color:green; ???????????margin:100px; ???????????/* 相对定位 */ ???????????position:relative; ???????} ???????/* 鼠标经过之后插入一个伪元素 */ ??????????????div:hover::before { ???????????content:""; ???????????/* 行内元素转为块元素 */ ???????????display:block; ???????????????????????width:100%; ???????????height:100%; ???????????/* ????????????????希望达到的效果是边框线包住div， ???????????????所以在计算元素坐标的时候需要把边框线的宽度算上 ???????????*/ ???????????border:5px solid rgba(0,0,0,0.5); ???????????/* ????????????????绝对定位，可问题是谁是这个伪元素的父元素呢？ ????????????????使用Chrome的检查功能，给最苦 知道了div是伪元素的父元素 ???????????*/ ???????????position:absolute; ???????????top:-5px; ???????????left:-5px; ???????????????????} ???</style></head><body> ???<div> ???</div></body></html>效果
鼠标经过时
CSS3优秀，值得学习。
学习资源： www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源，可以分享给我的话，用您的资源学习也可以。
博文是观看视频后，融入思考写成的。博文好，是老师讲得好。博文坏，是 给最苦 没认真。
css3基础 div:hover::before 鼠标经过div时出现边框线
原文地址：https://www.cnblogs.com/jizuiku/p/8442475.html