Pure CSS Expanding Link Underlines

Preview:

Description:

A minimal CSS framework that utilizes CSS3 transitions to create expanding link underlines on mouse hover.

How to use it:

Create a list of links as follow.

<ul class="ex-bar-nav">
  <li class="ex-bar-item">
    <div class="ex-bar-content">LinkedIn</div>
    <a href="#" target="_blank" class="ex-bar-link">
      <span class="ex-bar-bar"></span>
    </a>
  </li>
  <li class="ex-bar-item">
    <div class="ex-bar-content">GitHub</div>
    <a href="#" target="_blank" class="ex-bar-link">
      <span class="ex-bar-bar"></span>
    </a>
  </li>
  <li class="ex-bar-item">
    <div class="ex-bar-content">Twitter</div>
    <a href="#" target="_blank" class="ex-bar-link">
      <span class="ex-bar-bar"></span>
    </a>
  </li>
</ul>

Create the expanding underlines that appear on hover.

* { box-sizing: border-box; }

.ex-bar-nav {
  list-style: none;
  padding: 0;
}

.ex-bar-item {
  position: relative;
  display: inline-block;
  height: 45px;
  margin-right: 15px;
}

.ex-bar-content { padding: 10px 5px 0; }

.ex-bar-link {
  position: absolute;
  top: 0;
  width: 100%;
  display: block;
  padding: 40px 50% 0;
  transition: .5s ease;
}

.ex-bar-link:hover { padding: 40px 0 0; }

.ex-bar-bar {
  display: block;
  height: 5px;
  background: #00B6EA;
  border-radius: 3px;
}