Sizing sliding underline - html

Question

I want to make the sliding underline to run from left to right when i hover, and also set up the width of the line from the 1st letter to the last, and not bigger. How can i do that?
.nav-bar a:hover {
color: #000;
}
.nav-bar a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-bar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<div class="nav-bar">
<ul>
<li>RETROSPECTIVE SHOW /2006/</li>
<li>TEXTS</li>
<li>BIBLOGRAPHY</li>
</ul>
</div>

Answer 1

You can use display: inline-block; to keep the fixed width. And for underlining you can use pseudo-classes like :before and :after.
Have a look at the snippet below:
/* LEFT TO RIGHT */
.sliding-left-to-right {
display: inline-block;
margin: 0;
}
.sliding-left-to-right:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-left-to-right:hover:after {
width: 100%;
background: blue;
}
/* LAYOUT STYLING */
body {
margin: 20px;
}
a {
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: blue;
}
a:hover {
color: blue;
text-decoration: none;
cursor: pointer;
}
<a class="sliding-left-to-right">Underline – Left to Right</a>
Hope this helps!