JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<ul>
    <li>Просмотр новых публикаций</li>
    <li>Форумы</li>
    <li>Пользователи</li>
    <li>Awards</li>
</ul>

CSS

ul li {
    float: left;
    padding: 10px;
    font-family: Arial;
    cursor: pointer;
    position: relative;
    border-bottom: 3px solid transparent;
}

ul li:hover {
    color: #0072A3;
    border-bottom: 3px solid #0072A3;
}

ul li:hover:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #0072A3;
    position: absolute;
    left: 50%;
    bottom: -7px;
    margin-left: -4px;
}