How to make border bottom inside block? [closed]

Question

How to make border-bottom inside block after hover event?

I tried this using text-shadow, but seems it is not solution

Answer 1

An inset box shadow seems to be what you require

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

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

<div></div>

OR

Use a pseudo-element

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

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

<div></div>