最近做项目遇到一个需求，需要给卡片添加一个边框环绕的效果，当鼠标移入卡片时，出现边框。
这里我主要是使用:before 和 :after来辅助实现这个功能。
在很多时候，我们可以巧用:before 或者 :after 来实现一些看起来较为复杂的效果。
我们先看看效果：
代码如下，希望大家能受到些许的启发，能在自己的项目中也运用起来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<div class="border-line"></div>
</div>
<style>
.box {
width: 260px;
height: 100px;
margin: auto;
position: relative;
box-sizing: border-box;
}
.border-line {
width: 100%;
height: 100%;
border: 1px solid #ccc;
transition: all 0.6s ease-in;
box-sizing: border-box;
}
.border-line:before {
bottom: 0;
right: 0;
-webkit-transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
}
.border-line:after {
top: 0;
left: 0;
-webkit-transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
}
.border-line:before,
.border-line:after {
content: '';
display: block;
position: absolute;
box-sizing: border-box;
border: 3px solid transparent;
width: 0;
height: 0;
}
.border-line:hover {
border: 1px solid green;
}
.border-line:hover:before {
border-bottom-color: green;
border-left-color: green;
-webkit-transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
}
.border-line:hover:after {
border-top-color: green;
border-right-color: green;
-webkit-transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
}
.border-line:hover:before,
.border-line:hover:after {
border-width: 3px;
width: 100%;
height: 100%;
}
</style>
</body>
</html>