JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="side">
<div class="contact">
<ul>
<li><a href="" rel="contact"><img src="img/side_icon_contact.gif" width="16" height="16" alt="Contact" />Contact</a></li>
<li><a href="" rel="twitter"><img src="img/side_icon_twitter.gif" width="16" height="16" alt="Twitter" />Twitter</a></li>
<li><a href="" rel="facebook"><img src="img/side_icon_facebook.gif" width="16" height="16" alt="Facebook" />Facebook</a></li>
<li><a href="" rel="google"><img src="img/side_icon_google.gif" width="16" height="16" alt="Google+" />Google+</a></li>
</ul>
</div></div>

CSS

#side .contact a{font-size:18px;}
#side .contact a img{display:inline-block;margin-right:20px;}
#side .contact a:hover:after{font-size:10px; margin-left:30px;color:#f55050;}
#side .contact a[rel="contact"]:hover:after{content:"お問い合わせ";}
#side .contact a[rel="contact"]:hover{ background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = 'お問い合わせ'+this.innerHTML);}
#side .contact a[rel="twitter"]:hover:after{content:"不定期でつぶやいてます";}
#side .contact a[rel="facebook"]:hover:after{content:"Facebookページです";}
#side .contact a[rel="google"]:hover:after{content:"一応やってます";}