title: Before and After Hover Effect
body: <p>I have been scouring the web on before and after effects and I just haven't.. found anything remotely helpful. It's like the gray area of CSS. I was wondering how I would go about doing an effect like on twitter's homepage: This is on the hover effect. <a href="http://imgur.com/a/jBikq" rel="nofollow">http://imgur.com/a/jBikq</a>. It has a transition too, but I'm not sure how to implement it. Again i'm not even sure if this is using before and after, I imagine it is hover, but any help would be really appreciated.</p>
  
  <p>Here is my code for my navigation:</p>
  
  <pre><code>&lt;div id="navbar3" class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                    &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                    &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu" role="menu"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="divider"&gt;&lt;/li&gt;
                        &lt;li class="dropdown-header"&gt;Nav header&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  </code></pre>