Before and After Hover Effect - css

Question

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. http://imgur.com/a/jBikq. 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.
Here is my code for my navigation:
<div id="navbar3" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>

Answer 1

You can do it with :after and :before pseudo selector.
Im created an example based on your image, its look like this:
#import url('https://fonts.googleapis.com/css?family=Roboto');
body{
padding: 5%;
}
.exemple {
font-family: 'Roboto', sans-serif;
position: relative;
padding: 2.5% 3.5%;
text-decoration: none;
font-size: 0.9em;
color: #333333;
transition: ease .1s;
-webkit-transition: ease .1s;
}
.exemple:before {
font-family: 'FontAwesome';
content: '\f0e7';
font-size: 1.1em;
margin-right: 10px;
}
.exemple:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0px;
background: #20abe1;
transition: ease .1s;
-webkit-transition: ease .1s;
}
.exemple:hover {
color: #20abe1;
}
.exemple:hover:after{
height: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
Moments
Working Fiddle

Answer 2

You can definitely use a ::before or you can animate the border/padding and it will create the same grow effect. Working fiddle here: FIDDLE

Answer 3

You haven't provided a much detail on the exact thing you're attempting to replicate. I'm going to assume it's the underline that animates up from the bottom of a navigation item.
To do this you will need to use CSS transition.
A simplified version of what Twitter is doing is below. They set a height on the <a> and <li> and add a border to the <a>. Since they have overflow:hidden; applied to the border of the <li> the border they applied to the <a> is initially hidden.
When the <li> is hovered the height of the <a> is reduced. They use transition on the height to animate the border up into view.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
li {
float: left;
height: 40px;
overflow: hidden;
}
a {
display: block;
height: 40px;
padding: 0 10px;
line-height: 40px;
text-decoration: none;
overflow: hidden;
border-bottom: 3px solid #0c0;
transition: height 250ms ease-in-out;
}
li:hover a {
height: 37px;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Here is another way of animating in the underline with pseudo elements.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
li {
position: relative;
float: left;
}
a {
display: block;
padding: 0 10px;
line-height: 40px;
text-decoration: none;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
display: block;
height: 0;
width: 100%;
text-align: center;
background-color: #0c0;
transition: height 250ms ease-in-out;
}
li:hover a:after {
height: 3px;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>