CSS: bottom-border-transition - expand from middle

Question

I want to add a bit of transitions to my website. I already have that when someone is in a input-field (so :focus) the border changes color with a transition. I would like that transition to happen from the center to left and right.

So the animation is an expanding border to both sides. Is that possible with CSS? If I have to use Jquery or Javascript it's fine.

Thanks in advance, Ian

Answer 1

You can do the border transition with CSS. Hope this helps. CODEPEN example

HTML :

body {
  padding: 50px;
}

a, a:hover {
  color: #000;
  text-decoration: none;
}

li {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
  margin-right: 10px;
}
li:last-child {
  margin-right: 0;
}

li:after {
  content: '';
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
li:hover:after {
  width: 100%;
  background: blue;
}

<ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">PAGE</a></li>
  <li><a href="#">ABOUT US</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>