JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<nav>
    <a href='#'>Menuitem 1</a>
    <a href='#'>Menuitem 2</a>
    <a href='#'>Menuitem 3</a>
    <a href='#'>Menuitem 4</a>
</nav>

CSS

nav a{
    position: relative;
    display: block;
    margin: 1em;
    padding: 1em;
    font-family: arial;
    text-decoration: none;
    background-color: #ddd;
}

nav a::after{
    opacity: 0;
    position: absolute;
    padding: .5em;
    top: .25em;
    right: -1em;
    width: 2px;
    height: 2px;
    content: ' ';
    background-color: red;
    border: 12px solid #fff;
    border-radius: 666px;
}

nav a:hover::after{
    opacity: 1;
    
    -webkit-transition: opacity .2s ease;
    -moz-transition: opacity .2s ease;
    transition: opacity .2s ease;
}