Hover slide remove bottom border - CSS

Question

I'm wanting to remove the white bottom-border from my link when you hover it, but I want it to slide from right to left out (hope that makes sense).

Similar to a Translate X from 100% to 0%.

How would I do this?

.project-card-link {
  color: #fff;
  width: 38%;
  border-bottom: 1px solid #fff;
}

<a class="project-card-link" href="#" style="text-decoration: none">
  More Info <i class="fas fa-arrow-right"></I>
</a>

Any suggestions please? Cheers!

score 2 · Accepted Answer · answered May 08 '20 at 16:54

2

I do it this way:

.project-card-link {
  color: #f00;
  display: inline-block
}

.project-card-link:after{
    content: "";
    display: block;
    height: 0;
    border-top: 2px solid red;
    margin-top: 2px;
    transition: clip-path .2s ease-in;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.project-card-link:hover:after{
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

<a class="project-card-link" href="#" style="text-decoration: none">
More Info <i class="fas fa-arrow-right"></i>
</a>

answered May 08 '20 at 16:54

davidgiesemann

941
6
16

Works perfectly - thanks. – Jon Nicholson May 08 '20 at 17:01
@JonNicholson this is a bit overkill for a simply animation... – Temani Afif May 08 '20 at 19:44

score 1 · Answer 2 · answered May 08 '20 at 16:44

Instead of actually using border-bottom you can create an element ::after the link with a height for the height of the border and a background color of the border.

.project-card-link::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
    transition: width .3s;
}

.project-card-link:hover::after {
    width: 0;
}

.project-card-link {
  color: #fff;
  width: 38%;
   
    display:inline-block;
    color: #000;
    text-decoration: none;
}

<a class="project-card-link" href="#" style="text-decoration: none">
More Info <i class="fas fa-arrow-right"></I>
</a>

Hover slide remove bottom border - CSS

2 Answers2