如何在块内添加底部边框？

Question

如何在块级元素中实现鼠标悬停后的 border-bottom 效果？

我尝试使用文本阴影，但似乎不是解决方案。

- Huligan

---

你需要向我们展示你正在尝试的代码，否则我们将无法帮助你。 - Mohammad Usman

你能稍微解释一下吗？可以提供一个 CodePen 示例或者你尝试过的代码吗？ - Ninoop p george

可能是将边框放在div内部而不是其边缘上的问题的重复。 - user4994625

Answer 1

一个内阴影盒子看起来是你需要的

div {
  height: 75px;
  background: #c0ffee;
}

div:hover {
  box-shadow: inset 0 -5px 0 red;
}

<div></div>

或者

使用伪元素

div {
  height: 75px;
  background: #c0ffee;
  position: relative;
}

div:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: red;
}

<div></div>

- Paulie_D