JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Первый пункт меню</li>
    <li>Второй пункт меню</li>
    <li>Александр Александрович <br /> Александр Александрович<br /> Александр Александрович</li>
</ul>

CSS

ul { list-style: none;}
li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 10px;
    position: relative;
    float: left;
    clear: both;
    
}

li:before, li:after {
    content: '';
    position: absolute;
    width: 10px;
    top: 0;
    bottom: 0;
    left: 5px;
    border: 2px solid red;
    clip: rect( auto, 5px,  auto,  auto);
    opacity: 0;
    transition: all 1s;
 }
 li:hover:before, li:hover:after {
 	opacity: 1;
 }

li:after {
    clip: rect( auto, auto,  auto, 5px);
    left: auto;
    right: -5px;
}