Jump to content

Animate Archive List Links

Recommended Posts

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%;


Screen Shot 2022-05-25 at 7.35.45 PM.png

Link to comment

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;


GIF 2022-05-26 at 9.54.43 PM.gif

Edited by johnbuedel
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.