JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
    <li>Пункт 4</li>
</ul>

CSS

ul {
    list-style: none;
    background: lightblue;
    width: 300px;
    margin: 0;
    padding: 0;
}
li {
    border-top: 1px solid transparent;
    border-bottom: 1px solid blue;
    padding: 3px 10px;
    position: relative;
}
li:hover {
    border-bottom-color: red;
    background: salmon;
}
li:last-child {
    border-bottom-color: transparent;
}
li:last-child:before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 1px;
}
li:last-child:hover:before {
    background: red;
}