This can be done in a much more simple fashion. There is no need for the extra spans.
http://cssdeck.com/labs/cy1u4oeu
<a class="language-icon fr" href="#" alt="choose-your-language">Language</a>
.language-icon {
color:#000;
font-weight:700;
padding-right:20px;
padding-left:30px;
display:inline-block;
font-size:11px;
text-align:right;
text-decoration:none;
position:relative;
}
.fr {
background: url(http://www.aventuredusucre.com/images/iconFrenchLanguage.gif) no-repeat;
}
.language-icon:hover {
color:#d13030;
}
.language-icon:before {
content:'';
width:0;
height:0;
position:absolute;
right:5px;
top:40%;
border-left:4px solid transparent;
border-right:4px solid transparent;
border-top:4px solid #000;
}
.language-icon:hover:before {
border-top: none;
border-bottom:4px solid #d13030;
}