Mahdyar Irani Mahdyar Irani - 1 month ago 5x
CSS Question

which property to use for border-bottom animation like yahoo mail inputs?

I want to animate

of my list-item in navbar and i don't know what property/s should i use.

The animation is like yahoo mail registration input


the trick is to use an inset shadow

input {
  width: 80%;
  height: 30px;
  border: none;
  background: transparent;
.shadow {
  box-shadow: inset 0px -1px 0px 0px #ccc;
  transition: 0.8s;
.shadow:focus {
  box-shadow:inset 0px -3px 0px 0px #7777dd;
  outline: 0;
<input class="shadow" type="text" placeholder="Placeholder" />