Question

我将Bootstrap 4用于自定义wordpress主题。我读了这篇简短的文章，其中解释了如何在悬停时创建动画下划线。在桌面上，一切正常，但在移动设备上，下划线将占据菜单元素下宽度的100％。可以解决吗？

这是我正在使用的CSS代码：

.top{
  position: relative;
  color: black;
}
.top:hover{
  color: rgb(28,67,63);
}
.top:hover:after{
  width: 100%;
}
.top:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 2px solid rgb(28,67,63);
  transition: 0.4s;
}

在这里更清楚地显示出正在发生的问题

mobile underline

Answer 1

我已经解决了在移动设备上使用inline-block显示属性的问题。

.top{
 display: inline-block;
}

Answer 2

首先尝试排列CSS代码， .top：hover :: after 必须紧随 .top :: after 之后，

另外，在移动设备上，元素要占据整个宽度的技巧，因此请尝试在移动屏幕上为元素指定特定的宽度。

尝试此代码，效果很好。

<div class="top">
   Hi
</div>

.top{
  position: relative;
  color: black;
  width: 50px;
}
.top::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 2px solid rgb(28, 67, 63);
  transition: 0.4s;
}

.top:hover{
  color: rgb(28, 67, 63);
}
.top:hover::after{
  width: 100%;
}

修复移动设备上动画下划线的宽度

2 个答案: