CSS Translate causes typo to break - css

Question

I'm trying to add an effect to a menu I use on a website.
The effect is the first one of the list with a color change added: http://tympanus.net/Development/CreativeLinkEffects/
But when I try to apply it to my case I have a weird problem that happens on the not hovered element. You can see that the elements that are not hovered change opacity and font-size during the hover on an element.
I added the demo here :
a{
text-decoration:none;
}
/* Effect 15: scale down, reveal */
.cl-effect-15 a {
color: #FFF;
text-shadow: none;
}
.cl-effect-15 a::before {
margin-right: 10px;
content:'[';
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}
.cl-effect-15 a::after, .cl-effect-15 a::before {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
font-size: 12px;
}
.cl-effect-15 a::after {
margin-left: 10px;
content:']';
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}
.cl-effect-15 a:hover::before, .cl-effect-15 a:hover::after, .cl-effect-15 a:focus::before, .cl-effect-15 a:focus::after {
opacity: 1;
-webkit-transform: translateX(1px);
-moz-transform: translateX(0px);
transform: translateX(1px);
font-size: 14px;
}
.totblockhtml.html_2 {
padding-bottom:10px;
margin-bottom:0px;
}
.totblockhtml.html_2 {
margin-bottom: 0px;
padding-bottom: 9px;
padding-top: 4px;
width: 100%;
float: left;
background: none repeat scroll 0 0 #282F47;
margin-top: -20px;
background-image: url(../img/BlueJean.svg);
}
.totblockhtml.html_2 .block_content {
text-align:center;
color:#ababab;
padding-top: 5px;
}
.totblockhtml.html_2 ul li {
display: inline-block;
margin-left: 70px;
font-size: 14px;
font-family:"trajanpro_regular";
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
}
.totblockhtml.html_2 ul li:first-child {
margin-left:0px;
}
.totblockhtml.html_2 ul li a {
color: #9099AF;
font-size: 11px;
font-family:"Cinzel";
text-transform: uppercase;
letter-spacing: 2px;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}
.totblockhtml.html_2 ul li a:hover {
text-decoration:none;
color: #fff;
}
<div class="block totblockhtml html_2">
<div class="block_content">
<ul class="top_menu ">
<li class="top_menu_search cl-effect-15">Rechercher
</li>
<li class="top_menu_sell cl-effect-15">Vendre
</li>
<li class="top_menu_advice cl-effect-15">Conseils
</li>
</ul>
</div>
</div>

Answer 1

Here's the code changing the opacity:
.cl-effect-15 a::after, .cl-effect-15 a::before {
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
and here's the one changing the font-size:
.cl-effect-15 a:hover::before, .cl-effect-15 a:hover::after, .cl-effect-15 a:focus::before, .cl-effect-15 a:focus::after {
font-size: 14px;
}
I set font-size to 12px and opacity to 1, check it out here: jsFiddle