JSFiddle - React, Tailwind, and code Playground

by DJS Baker

HTML

<a class="one" href="#" title=""><span></span></a>


<a class="alt" href="#" title=""><span></span></a>

CSS

a.one {display: block; padding: 13px 10px 10px; width: 25px; height: 25px}



a.one:before {
    content: '';
    border-top: 1px solid #000;
    height: 1px;
    width: 25px;
    display: block; 
    margin-top: 0px;
    -webkit-transition:all 0.4s ease-in-out;
	-moz-transition:all 0.4s ease-in-out;
	-o-transition:all 0.4s ease-in-out;
	-ms-transition:all 0.4s ease-out;
	transition:all 0.4s ease-in-out;
}

a.one:after {
    content: '';
    border-top: 1px solid #000;
    height: 1px;
    width: 25px;
    display: block;
    margin-top: 3px;
    -webkit-transition:all 0.4s ease-in-out; 
	-moz-transition:all 0.4s ease-in-out;
	-o-transition:all 0.4s ease-in-out;
	-ms-transition:all 0.4s ease-out;
	transition:all 0.4s ease-in-out;
}

a.one span:before {
    content: '';
    border-top: 1px solid #000;
    height: 1px;
    width: 25px;
    display: block;
    margin-top: 3px;
    -webkit-transition:all 0.4s ease-in-out;
    -moz-transition:all 0.4s ease-in-out;
    -o-transition:all 0.4s ease-in-out;
    -ms-transition:all 0.4s ease-out;
    transition:all 0.4s ease-in-out;
    opacity: 1;
}

a.one:hover span:before {
    width: 0px;
    margin-left: 50%;
    margin-top: -2px;
    opacity: 0;
}
a.one:hover:before {
    margin-left: -1px;
    margin-top: 6px;
   	-webkit-transform:translateY(0) rotate(45deg);
	transform:translateY(0) rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}

a.one:hover:after {
    margin-top: -2px;
	-webkit-transform:translateY(0) rotate(-45deg);
	transform:translateY(0) rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}


/* ALT */

a.alt {display: block; padding: 13px 10px 10px; width: 25px; height: 25px}



a.alt:before {
    content: '';
    border-left: 1px solid #000;
    width: 1px;
    height:...