http://stackoverflow.com/questions/7101016/css-wrap-text-exactly-to-width

HTML

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

CSS

li {
  background-size: 0 0;
  transition: background-size 2s ease-in;
  -moz-transition: background-size 2s ease-in;
  -web-kit-transition: background-size 2s ease-in
}

li:hover {
  background-size: 100% 100%;
  background-color: rgba(0, 0, 0, 0.1);
  display: inline-table;
}