链接下划线未显示在移动设备上的无序列表中

Question

我在伪元素后使用紫色自定义了链接外观：

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>

在桌面上，所有链接都按预期工作（第三个链接处于悬停状态）：

但在移动设备上，只有我页面第二部分中的链接没有下划线：

您可以在 www.felkru.com 上重现问题，使用开发工具中的任何移动设备或在智能手机上打开页面。

这是为什么？你将如何解决它？

Answer 1

看起来你的 a:after 伪元素被另一个元素重叠了。

如果将 z-index 更改为 1（或更大），您将看到紫色下划线。

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:after 伪元素与您的文本重叠，这可能是不可取的。

Answer 2

最好在移动设备上禁用悬停效果，因为移动 safari 不支持它。

Answer 3

我在移动设备或桌面设备上看不到“Todo App”链接。您删除了该链接吗？

至于网站的行为方式取决于查看它的设备之间的差异：您似乎正在使用 .htaccess 或其他方式重定向到移动版本。如果您尚未将移动检测和缩放元标记添加到页面的源代码中，这可能就是这样做的原因。

例如，像这样的元标记应该位于每个页面的

<head> HERE </head>

部分。

我看到你的源代码中有这些：

<meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">

尝试这些：

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = yes">

我假设它可能与语法有关，或者可能是一些重叠的代码试图以不同的方式做同样的事情？

链接下划线未显示在移动设备上的无序列表中

问题描述投票：0回答：3

3个回答

最新问题

链接下划线未显示在移动设备上的无序列表中

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3