效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./reset.css">
<style>
.tab_content {
width: 250px;
height: 200px;
position: relative;
color: #75797c;
padding:50px 40px 0;
font-size: 16px;
line-height: 21px;
margin:50px ;
background-color: #eee;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
transition: transform .3s linear;
}
.tab_content::before {
content: '';
width: 0;
height: 2px;
background-color: #108CEE;
position: absolute;
bottom: 0;
left: 1px;
transition: width 1s ease;
}
.tab_content:hover {
transform: translate(0, -5px);
}
.tab_content:hover::before {
width: 100%;
}
</style>
</head>
<body>
<div class="tab_content">
<p>启航校园计划HOT</p>
<p>学生专享1折</p>
<p>上云，18元/3月</p>
<p> 海量学习资料9点开抢</p>
</div>
</body>
</html>
