JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li class="black-list"><a href="#">Главная страница</a></li>
    <li class="black-list" ><a href="#">Контакты</a></li>
    <li class="black-list"><a href="#">Наш прейскурант</a></li>
    <li class="black-list"><a href="#">Стоматологический словарь</a></li>
</ul>

CSS

ul.menu {
    margin-top: 26px;
    list-style-type: none;
    font: 16px Arial, sans-serif;
    color: black;
}
ul.menu li {
    height: 30px; 
    width: 300px;
    margin: 3px 0;
    font-weight: bold;
}
ul.menu li:hover {
    background: green;
    position: relative; 
}
ul.menu li:hover:before {
    content: "";
    position: absolute;
    left: -20px; 
    height: 55px; 
    width: 20px;
    background: blue;
}
ul.menu li a {
    text-decoration: none;
    line-height: 30px;/*центрирую текст по вертикали*/
    color: #000;
}
ul.menu li:hover a {
    color: #fff;
}