• HTML
• CSS

HTML

<ul>
    <li style="--clr:#00ade1">
        <a href="#" data-text="&nbsp;Home">&nbsp;Home</a>
    </li>
    <li style="--clr:#ff6493">
        <a href="#" data-text="&nbsp;About">&nbsp;About</a>
    </li>
    <li style="--clr:#ffdd1c">
        <a href="#" data-text="&nbsp;Services">&nbsp;Services</a>
    </li>
    <li style="--clr:#00dc82">
        <a href="#" data-text="&nbsp;Team">&nbsp;Team</a>
    </li>
    <li style="--clr:#dc00d4">
        <a href="#" data-text="&nbsp;Contact">&nbsp;Contact</a>
    </li>
</ul>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#252839;
}
ul
{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:30px;
}
ul li
{
    position:relative;
    list-style:none;
}
ul li a
{
    position:relative;
    font-size:4em;
    text-decoration:none;
    line-height:1em;
    letter-spacing:2px;
    text-transform:uppercase;
    color:transparent;
    -webkit-text-stroke:1px var(--clr);
}
ul li a:before
{
    content:attr(data-text);
    position:absolute;
    color:var(--clr);
    width:0;
    overflow:hidden;
    transition:1s;
    border-right:8px solid var(--clr);
}
ul li a:hover::before
{
    width:100%;
    filter:drop-shadow(0 0 25px var(--clr));
    /*-webkit-text-stroke:1px var(--clr)*/
}