Search code examples
htmlcsshyperlinkgoogle-chrome-devtoolshtml-lists

Links underline not showing in unordered list on mobile devices

I customized my links appearance with an purple after pseudo element:

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>

On desktop all the links work like expected (third link is in hover state): Links working as expected

But on mobile only links within the second section of my page do not have the underline: Links not working as expected in mobile ul

You can reproduce the problem at www.felkru.com, by using any mobile device in dev tools or opening the page on your smartphone.

Why is that and how would you fix it?

Solution

  • It’s probably best to disable the hover effect on mobile since mobile safari doesn‘t support it.