css - 如何在 block 内制作边框底部？

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 7 年前。

Improve this question

如何制作border-bottom悬停事件后在 block 内？

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

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>