How do I achieve this animated underline effect on my menu bar?

Question

On this site, when you hover over an element from the main menu (the white one), a yellow underline starts going from left to right.

Since I don't understand anything from inspecting the element, could you explain to me how can I achieve this effect?

Answer 1

Each item has an additional .uiLinkBar div whose width is animated using a :hover selector on the link.

Here's a minimal example extracted from the site (with orange instead of yellow).

a.uiLink {
  position: relative;
  padding-bottom: 12px;
  margin-right: 5px;
  text-decoration: none;
  color: #333;
}

a.uiLink:hover {
  color: #000;
}

a.uiLink:hover i.uiLinkBar {
  width: 100%;
}

a.uiLink i.uiLinkBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 9px;
  background: #ff6600;
  transition: all .3s ease-in-out;
}

<a class="uiLink" href="#">
  Example Link 1
  <i class="uiLinkBar"></i>
</a>
<a class="uiLink" href="#">
  Example Link 2
  <i class="uiLinkBar"></i>
</a>
<a class="uiLink" href="#">
  Example Link 3
  <i class="uiLinkBar"></i>
</a>