Ссылки подчеркнуты и не отображаются в неупорядоченном списке на мобильных устройствах. ⇐ CSS

[Anonymous]

Я настроил внешний вид своих ссылок с помощью фиолетового псевдоэлемента после:

Код: Выделить всё

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%;
}

Код: Выделить всё

Projects
[list]
[*][url=https://grenzlandjugend.de]Homepage of a local youth club[/url]
[*][url=https://wzapp.felkru.com]WhatsApp archive reader[/url]
[*][url=https://docs.v1engineering.com/mpcnc/intro/]I built a version of this CNC-Router[/url]
[*][url=https://mytodoapp123.web.app/]Todo App with login and synch functionality[/url]
[/list]

A lot of the things I programmed recently are available on [url=https://github.com/felkru]GitHub[/url], my [url=https://www.freecodecamp.org/felkru]FreeCodeCamp Profile[/url] or [url=https://stackoverflow.com/users/18695803/felkru]Stackoverflow[/url]

На рабочем столе все ссылки работают так, как ожидалось (третья ссылка находится в состоянии наведения ):


Но только на мобильных устройствах ссылки во втором разделе моей страницы не подчеркиваются:


Проблему можно воспроизвести на сайте www.felkru.com, используя любое мобильное устройство в инструментах разработки или открыв страницу на смартфоне.
Почему это так и как это исправить?


Подробнее здесь: https://stackoverflow.com/questions/718 ... le-devices