JSFiddle - React, Tailwind, and code Playground

by Rafael Nepomuceno

HTML

<div id="menu">
	<ul>
        <li><a href="#">Link #1<br />Line #2</a></li>
		<li><a href="#">Link #2<br />Line #2</a><br /></li>
		<li><a href="#">Link #3</a></li>
		<li><a href="#">Link #4</a></li>
	</ul>
</div>

CSS

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: arial;
    font-size: 16px;
}
a{
    color: #000000;
}
a:hover{
    color: #860000;    
}
#menu{
    margin: 15px auto;
    padding: 20px;
    width: 300px;
    background: #DDDDDD;
    
    border-radius: 5px;
    box-shadow: 0 0 5px #000000;
}
#menu ul{
    list-style: none;
}
#menu ul li{
    position:relative;
}
#menu li:before{
    margin-right: 10px;
    content: url("http://st.deviantart.net/emoticons/s/smile.gif");
    
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}
#menu li:after{
    content: url("http://st.deviantart.net/emoticons/r/razz.gif");
    position:absolute;
    left:0;
    top: 0; /* =] */
    opacity:0;
    
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}
#menu li:hover:after{
    opacity:1;
}
#menu li:hover:before{
    opacity:0;
}