6

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

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

Huligan
  • 419
  • 2
  • 6
  • 18
  • 1
    You need to show us code that you are trying otherwise we won't be able to help you.. – Mohammad Usman Jun 30 '16 at 06:38
  • 1
    Can you explain it a bit.. with a codepen sample or provide the code you have tried.. – Ninoop p george Jun 30 '16 at 06:39
  • Possible duplicate of [Placing border inside of div and not on its edge](http://stackoverflow.com/questions/9601357/placing-border-inside-of-div-and-not-on-its-edge) –  Jun 30 '16 at 07:01

1 Answers1

30

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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161