ホバー変更のテキストの問題

Question

私は "ボックス"の上にマウスを置くと、その内部のテキストが変更されるようにしようとしています。ただし、チェックマーク/エラーマークとフォローまたはアンフォローの間に改行があるようです。どうして？

HTML：

<a class="afp" href="demo.html"> 
<span class="addfriend2"> 
<span class="fr1"> 
<font color="#33FF00">&#x2713;</font > Following 
</span> 
<span class="fr2"> 
<font color="#FF0000">&#x2717</font> Unfollow 
</span> 
</span> 
</a> 

CSS：フォローの前に行方不明にセミコロンを追加するときに問題が修正されました不思議な

.addfriend2 { 
     border-radius: 15px; 
     background: #517eca; 
     padding: 8px; 
     margin-left: 30px; 
     text-align: center; 
     font-size: 14px; 
    } 
    a.afp{ 
     text-decoration: none; 
     color:#000000; 
    } 
    a.afp:visited{ 
     text-decoration: none; 
     color:#000000; 
    } 
    a.afp:active{ 
     text-decoration: none; 
     color:#000000; 
    } 
    span.fr2{ 
     display:none; 
    } 
a.afp:hover span.fr1{ 
    display:none; 
} 
a.afp:hover span.fr2{ 
    display:inline; 
} 

Answer 1

。