To expand the bottom border on hover, you can use transform:scaleX(); (mdn reference) and transition it from 0 to 1 on the hover state.

Here is an example of what the border hover effect can look like :

The border and transition are set on a pseudo element to prevent transitioning the text and avoid adding markup.
To expand the bottom border from left or right, you can change the transform-origin property to the left or right of the pseudo element:

h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
  display:block;
  content: '';
  border-bottom: solid 3px #019fb6;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
h1:hover:after { transform: scaleX(1); }
h1.fromRight:after{ transform-origin:100% 50%; }
h1.fromLeft:after{  transform-origin:  0% 50%; }

<h1 class="fromCenter">Expand from center</h1><br/>
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>

Expand bottom border on hover with 2 lines

You can achieve this effect when the text spans on 2 lines. The before pseudo element is absolutely positioned to make underline of the first line with bottom:1.2em;:

h1 { position:relative;color: #666;display:inline-block; margin:0;text-transform:uppercase;text-align:center;line-height:1.2em; }
h1:after, h1:before {
  display:block;
  content: '';
  border-bottom: solid 3px #019fb6;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
h1:before{
  position:absolute;
  bottom:1.2em; left:0;
  width:100%;
}
.ef2:hover:after {
  transition-delay:150ms;
}
  
h1:hover:after, h1:hover:before { transform: scaleX(1); }

<h1>Expand border<br/>on two lines</h1>
<br/>
<br/>
<h1 class="ef2">Expand border<br/>effect two</h1>

Different transition direction on hover in and out :

The point is to change the transform-origin position from one side to the other on the hover state. This way the bottom boder enters from one side on hover and exits on the other when the element isn't hovered anymore.
Here is a demo :

h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
  display:block;
  content: '';
  border-bottom: solid 3px #019fb6;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
h1.fromLeft:after{ transform-origin: 100% 50%; }
h1.fromRight:after{  transform-origin:   0% 50%; }
h1.fromLeft:hover:after{ transform: scaleX(1); transform-origin:   0% 50%; }
h1.fromRight:hover:after{ transform: scaleX(1); transform-origin: 100% 50%; }

<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>

find working fiddle demo

give position relative to a tag.

<a href="#modal7" class="nombore">
     <span>/07</span>
     <span class="slider"></span>  
 </a>

.nombore{
    position:relative;
    display:inline-block;
    transition: all 0.3s ease-out;
}

You can not animate border in this manner. You have to use pseudo element after. Animate the width of this element from left to right!

.menu-text {
    font-size: 1em;
    height: 120px;
    margin-top: -10px;
    background: #334960;
    padding-right: 35px;
    color: #FFF;
    text-decoration: none;  
    line-height: 125px;
    display: inline-block;
    cursor: pointer;
}
.menu-text:after {
    transition: all ease-in-out .2s;
    background: none repeat scroll 0 0 #ffffff;
    content: "";
    display: block;
    height: 2px;
    width: 0;
}
.menu-text:hover:after {
    width: 100%;
}

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>

<div class="menuitem">
    Menu Item
    <span></span>
</div>

CSS:

.menuitem {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 32px;
    text-align: center;
    background: #FFE;
    cursor: pointer;
}
.menuitem span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: #000;
    transition: all 0.6s;
}
.menuitem:hover span {
    width: 100%;
}

http://jsfiddle.net/samliew/QUMgy/

Hey @yuxxeun!

Here's a translated version of this animation effect - after:duration-1000 ease-out after:block after:h-0.5 after:w-full after:origin-bottom-right after:scale-x-0 after:bg-red-500 after:transition-transform after:hover:origin-bottom-left after:hover:scale-x-100.

Full example - https://play.tailwindcss.com/ldoCgYRnRn

You can position your :after element to the right

#header {
  position: relative;
}
#header a:after {
  content: '';
  display: block;
  border-bottom: 3px solid red;
  width: 0;
  position: absolute;
  right: 0;
  -webkit-transition: 1s ease;
  transition: 1s ease;
}

#header a:hover:after { 
  width: 100%; 
}

hope you will trigger that animation with javascript, you can do it in pure CSS with transition, and setting right from 100% to 0 with extra class as animation transition: right 4s;

.slider is now inside the #name div, so it will move with it and top/left will be relative to this text

https://jsfiddle.net/0ou3o9rn/

version with CSS animation (adding animated class in javascript, but you can bind it somehow to hover, or other event on creation) https://jsfiddle.net/tto1vrz5/