内部底部白线[重复]

Question

我正在克隆 Quizlet.com。停留在主屏幕风格。 将鼠标悬停在卡片上会添加一个下划线以指示该卡片已被选中。

不悬停时：测验：

我的网站：

将鼠标悬停在测验上时：

将鼠标悬停在我的网站上时：

我在css中添加了border-bottom，它是在区域之外添加的，而不是在div标签的区域内。

编辑： 卡被推出的现象得到了解决。但我不喜欢卡片下的阴影。我会附上一张照片。

Answer 1

您可以尝试两种选择：

• box-shadow

• ::after伪元素

box-shadow:

可能是最短的解决方案 - 创建一个仅在底部可见的 box-shadow，通过指定相同的 blur 和 spread（分别为第 3 和第 4 个参数）来实现。

div {
  width: 100px;
  height: 50px;
  background-color: #1E2230;
  border-radius: 5px;
  transition: 0.2s;
}

div:hover {
  box-shadow: 0 14px 2px 2px white;
}

body {
  background-color: #ededed;
}

<div></div>

^{注意：不符合 OP 的要求 - 轮廓在外面，而不是在里面}

::after伪元素

将一个高度为0px、宽度为100%、边框为10px 的元素绝对定位在div 的底部，其position 必须为relative。

我会推荐这个解决方案，看看它是如何轻松定制和理解的。

div {
  width: 100px;
  height: 50px;
  background-color: #1E2230;
  border-radius: 5px;
  transition: 0.2s;
  position: relative;
}

div:hover:after {
  content: '';
  border-bottom: 10px solid white;
  position: absolute;
  height: 0px;
  bottom: 0;
  width: 100%;
  left: 0;
}

body {
  background-color: #ededed;
}

<div></div>d

Answer 2

如果您使用 devtool 并针对特定的 div，我想您会知道 Quizlet 中该 div 做了什么。