JSFiddle - React, Tailwind, and code Playground

by sarbasish

HTML

<br/><br/>
<ul>
    <li>
       <a href="" class="hoverchild">
            <i class="fa fa-facebook alt">Sarbasish Mishra</i>
            <i class="fa fa-facebook alt">Hello this is hover effect</i>
       </a>
    </li>
<ul>

CSS

li{
    list-style:none;
}    
a.hoverchild i {
       display:block;
       margin-bottom:5px;
    }

    a.hoverchild i:last-child{
       visibility:hidden;
    }

    a.hoverchild {
        display:inline-block;
    }

    a.hoverchild i:hover~i:last-child {
        position:relative;
        //float:left;
        clear:both;
        visibility:visible;
    }