Animate Archive List Links

Site URL: https://yellow-pufferfish-93g7.squarespace.com/

I'm trying to add an animation hover to the list of links in my archive block. I just want the underline to go from right to left when the user hovers over a list item.

I've tried some different code, but I can seem to figure out the class to put the code on. 

.archive-item-list {
    text-decoration: none;
    position: relative;
}
.archive-item-list a:after {
    content: "";
    height: 2px;
    width: 0;
    position: absolute;
    background-color: black;
    left: 0;
    bottom: 0;
    transition: all 0.7s;
}
.archive-item-list a:hover:after {
    transition: all 0.2s;
    width: 100%;
}

Your site is private. Can you setup password & share url again?

Sure! Password is: NewSite2022!

Thank you!

Hey, all. I figured it out. Here's the code if you need it. Also, I added some JS to put the blog posts in alphabetical. If you'd like me to drop that in here, let me know. 

.archive-item {
  display: flex;
  width: auto;
}

.archive-item-link:after {
  display: flex;
  content: '';
  width: 0px;
  height: 3px;
  transition: width .5s ease;
}

.archive-item-link:hover:after {
  width: 100%;
  background: black;
}