如何在块内制作边框底部？ [关闭]

Posted 2023-05-07

【中文标题】如何在块内制作边框底部？ [关闭]

【英文标题】：How to make border bottom inside block? [closed]

【发布时间】：2016-11-02 02:28:43

【问题描述】：

悬停事件后如何使border-bottom在块内？

我尝试过使用 text-shadow，但似乎不是解决方案

【问题讨论】：

您需要向我们展示您正在尝试的代码，否则我们将无法为您提供帮助..

你能解释一下吗..用codepen示例或提供你尝试过的代码..

Placing border inside of div and not on its edge的可能重复

【参考方案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>