List items are not accessible when applying an overlay

Question

I am trying to clone the list items in this site: https://www.udemy.com/courses/search/?src=ukw&q=photoshop&persist_locale=&locale=en_US

Everything was going great until i added an overlay. It prevents me from clicking the link. Anybody have a solution ?

ul{
    position: relative;
}
ul:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(transparent 10%, rgba(255,255,255,.7) );
}

<ul>
    <li><a href="">Item1</a></li>
    <li><a href="">Item2</a></li>
    <li><a href="">Item3</a></li>
    <li><a href="">Item4</a></li>
    <li><a href="">Item5</a></li>
</ul>

Answer 1

Just add pointer-events:none so that you now have access to the items under the overlay

ul{
    position: relative;
}
ul:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(transparent 10%, rgba(255,255,255,.7) );
    pointer-events:none;
}

<ul>
    <li><a href="">Item1</a></li>
    <li><a href="">Item2</a></li>
    <li><a href="">Item3</a></li>
    <li><a href="">Item4</a></li>
    <li><a href="">Item5</a></li>
</ul>