div {
border: 1px solid black;
padding: 5px;
margin: 5px 30px;
background-color: pink;
}
div:hover {outline: 10px dotted rgba(255,0,0,0.3);}
.ex1:hover {outline-offset: 5px;}
.ex2:hover {outline-offset: 15px;}
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<p>요소에 마우스를 올리세요</p>
<div class="ex1">outline-offset: 5px;</div>
<div class="ex2">outline-offset: 15px;</div>
</body>
</html>