<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css小样式</title>
</head>
<style type="text/css">
body{
margin: 0px;
padding:0px;
background:pink;
}
.mo-tab-default{
display: block;
33.333%;
height: 30px;
line-height: 30px;
text-align: center;
position: relative;
cursor:context-menu;
float: left;
overflow: hidden;
}
.mo-tab-default:before{
position: absolute;
content: "";
background:steelblue;
left: -100%;
bottom: 0px;
height: 1px;
50%;
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
}
.mo-tab-default:after{说
position: absolute;
content: "";
background:steelblue;
right: -100%;
bottom: 0px;
height: 1px;
50%;
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
}
.mo-tab-default:hover::before{
left: 0;
}
.mo-tab-default:hover::after{
right: 0;
}
</style>
<body>
<a class="mo-tab-default">11</a>
<a class="mo-tab-default">22</a>
<a class="mo-tab-default">33</a>
</body>
</html>