Unterstrichene Links werden in der ungeordneten Liste auf Mobilgeräten nicht angezeigt

Ich habe das Erscheinungsbild meiner Links mit einem violetten After-Pseudo-Element angepasst:

body {
 background: black;
 font-family: sans-serif;
 color: white;
}
li {
 margin-bottom: 0.3em;
 font-weight: 300;
 font-size: 1.6em;
}
a {
 text-decoration: none;
 color: white;
 position: relative;
}
a:after {
 content: '';
 position: absolute;
 z-index: -1;
 top: 60%;
 left: -0.1em;
 right: -0.1em;
 bottom: 0;
 transition: top 200ms cubic-bezier(0, 0.8, 0.13, 1);
 background-color: hsl(250, 90%, 60%);
 filter: opacity(50%);
}
a:hover:after {
 top: 0%;
}

<h2>Projects</h2>
<ul>
 <li><a href="https://grenzlandjugend.de">Homepage of a local youth club</a></li>
 <li><a href="https://wzapp.felkru.com">WhatsApp archive reader</a></li>
 <li><a href="https://docs.v1engineering.com/mpcnc/intro/">I built a version of this CNC-Router</a></li>
 <li><a href="https://mytodoapp123.web.app/">Todo App with login and synch functionality</a></li>
</ul>
<p>
 A lot of the things I programmed recently are available on <a href="https://github.com/felkru" target="_blank">GitHub</a>, my <a href="https://www.freecodecamp.org/felkru">FreeCodeCamp Profile</a> or <a href="https://stackoverflow.com/users/18695803/felkru">Stackoverflow</a>
</p>

Lösung des Problems

Es scheint, dass Ihr a:after-Pseudoelement von einem anderen Element überlappt wird.

Wenn Sie den Z-Index auf 1 (oder mehr) ändern, sehen Sie die violette Unterstreichung.

a:after {
 content: '';
 position: absolute;
 z-index: 1;
 top: 60%;
 left: -0.1em;
 right: -0.1em;
 bottom: 0;
 transition: top 200ms cubic-bezier(0, 0.8, 0.13, 1);
 background-color: hsl(250, 90%, 60%);
 filter: opacity(50%);
} 

Dies scheint jedoch dazu zu führen, dass Ihr a:after-Pseudoelement Ihren Text überlappt, was unerwünscht sein könnte.