css中transition的使用以及:before:after的使用（小样式）

<!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;
  width: 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;
  width: 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;
  width: 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>