JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div>some text<i></i></div>

CSS

div{
    width:150px;
    padding:10px;
    border:1px solid #333;
    position:relative;
}
i{
    position:absolute;
    right:17px;
    top:2px;
    display:inline-block;
    width:22px;
    height:22px;
    border:2px solid #333;
    border-radius:100%;
}
div:after{
    content:"";
    position:absolute;
    right:20px;
    top:14px;
    display:block;
    width:20px;
    height:2px;
    background:#333;
    transform:scale(1);
    transition:transform .25s;
    
}
div:before{
    content:"";
    position:absolute;
    right:20px;
    top:14px;
    display:block;
    width:20px;
    height:2px;
    background:#333;
    transform:rotate(90deg);
    transition:transform .5s;
}
div:hover:before{
    transform:rotate(0deg);
}
div:hover:after{
    transform:scale(.5);
}