JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li><a href="#">asdasdasd</a></li>
    <li><a href="#">asdasdasd</a></li>
    <li><a href="#">asdasdasd</a></li>
    <li><a href="#">asdasdasd</a></li>
</ul>

CSS

ul {
    margin: 0;
    padding: 0;
    width: 200px;
}

ul li {
    margin-bottom: 10px;    
    position: relative;
    height: 40px;
}

ul li a {
    background: url(http://placehold.it/10/ffffff/000000) 10px center no-repeat, #ccc;
    padding-left: 30px;
    height: 40px;
    line-height: 40px;
    display: block;
}
ul li a::after {
    content: '';
    display: none;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 20px;
    top: 13px;
    background: red;
}
ul li a:hover {
   background: url(http://placehold.it/10/ffffff/000000) 10px center no-repeat, green;
}

ul li a:hover::after {
    display: block;
}