マウスオーバーするとtransitionを使って右へ文字を寄せます

デモページへopen_in_new

HTMl

<div class="mod_menulist">
<ul>
<li><a href="#"><span>Before selecting lighting</span></a></li>
<li><a href="#">Lighting basics</a></li>
<li><a href="#">The light required for each room</a></li>
<li><a href="#">The psychological impressions due to changes in light color(color temperature)</a></li>
<li><a href="#">Applying the impact of light</a></li>
<li><a href="#">The workings and differences of lights</a></li>
<li><a href="#">Types of light sources</a></li>
<li><a href="#">Features of principal light sources</a></li>
<li><a href="#">Styles of lights</a></li>
<li><a href="#">Types and features of principal lighting fixtures</a></li>
</ul>
<!-- / .mod_menulist --></div>

CSS

/* mod_menulist
-----------------------------------------*/
.mod_menulist{
 margin:0 20px 0 20px!important;
}
.mod_menulist ul{
}
.mod_menulist ul li{
 display:block;
 line-height:1.3!important;
}
.mod_menulist ul li a{
 display:table;
 width:100%;
 box-sizing:border-box;
 padding:12px 12px 5px 12px!important;
 -ms-transition:all 0.3s linear 0s;
 -moz-transition:all 0.3s linear 0s;
 -webkit-transition:all 0.3s linear 0s;
 transition:all 0.3s linear 0s;
 border-bottom:solid 1px #dfdfdf!important;
}
.mod_menulist ul li a:before{
 font-family: 'FontAwesome';
 content: "\f105";
 font-size:18px!important;
 color:#666666;
 font-weight:bold;
 display:table-cell;
 vertical-align:middle;
 line-height:1;
 width:15px;
 padding:0 14px 5px 12px!important;
}
.mod_menulist ul li a:hover{}
.mod_menulist ul li a:link    {color:#000; text-decoration:none!important;}
.mod_menulist ul li a:visited {color:#000; text-decoration:none!important;}
.mod_menulist ul li a:hover   {color:#00a0c6; background-color:#ebebeb; text-decoration:none!important; padding-left:18px!important;}
.mod_menulist ul li a:active  {color:#00a0c6; background-color:#ebebeb; text-decoration:none!important; padding-left:18px!important;}