make a underline with 3a 3abefore css

1    .underline {
2       text-decoration: none; 
3       position: relative; 
4     }   
5
6    .underline:after {
7        position: absolute;
8        content: '';
9        height: 2px;
10		  /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
11        bottom: -4px; 
12
13
14       /****** 
15       optional values below 
16       ******/
17        
18        /* center - (optional) use with adjusting width   */
19        margin: 0 auto;
20		  left: 0;
21        right: 0;
22		  width: 50%;
23		  background: green;
24		  
25		  /* optional animation */
26		  -o-transition:.5s;
27  		  -ms-transition:.5s;
28        -moz-transition:.5s;
29        -webkit-transition:.5s;
30        transition:.5s;
31    }
32	 
33
34	 /* optional hover classes used with anmiation */
35	  .underline:hover:after {
36		  width: 80%;
37		  background: orange;
38    }