Change border width

Viewed 20

So i've been searching a lot lately and cant find an answer. How do I change the width of a border-bottom like I want to have it 5px from left to right, How? I tried watchinenter image description hereg youtube videos and everything

As you can see in the picture the border bottom's width is not 100% to the text

1 Answers

Here's a nice effect of drawing fake border using background width. You can very much play with size, color width and so on.

a {
  font-size: 20px;
  text-decoration: none;
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .5s ease-out;
  background-image: linear-gradient(to bottom, transparent 20%, currentColor 21%);
}

a:hover {
  background-size: 100% 1px;
}
<a href="#">Hover me with your mouse</a>

Related