CSS3 Animation mit CSS Transitions

<div class="container">
  Hier mit der Maus drüberfahren
</div>

.container {
  text-align: center;
  width: 300px;
}
.container:after {
  background-color: #33ccff;
  content: "";
  display: block;
  height: 2px;
  margin: 5px auto;
  width: 10%;
  -webkit-transition: width 0.3s ease-in-out;
  -moz-transition: width 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out;
  transition: width 0.3s ease-in-out;
}
.container:hover:after {
  width: 50%;
}