Jump to content

Underline Animation for Pagination Titles

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://www.addisonpann.art/

Website password: toast

I've applied an underline animation to my navigation links when they're in a hover state. This is the code I used:

.header-nav-item--collection a {
  	display: inline;
  	position: relative;
  	overflow: hidden;
}
.header-nav-item--collection a:after {
	content: "";
	position: absolute;
	z-index: -1;
	right: 0;
	width: 0;
	bottom: -3px;
	background: #E19D9D;
	height: 1px;
	transition-property: width;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}
.header-nav-item--collection a:hover:after,
.header-nav-item--collection a:focus:after,
.header-nav-item--collection a:active:after {
	left: 0;
	right: auto;
	width: 100%;
}

I'm looking to add this exact same animation to my pagination titles when hovered over, but haven't had any luck so far.

Any help would be appreciated. 🙂

Link to comment
  • Solution
2 hours ago, addisonpann said:

Site URL: https://www.addisonpann.art/

Website password: toast

I've applied an underline animation to my navigation links when they're in a hover state. This is the code I used:

.header-nav-item--collection a {
  	display: inline;
  	position: relative;
  	overflow: hidden;
}
.header-nav-item--collection a:after {
	content: "";
	position: absolute;
	z-index: -1;
	right: 0;
	width: 0;
	bottom: -3px;
	background: #E19D9D;
	height: 1px;
	transition-property: width;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}
.header-nav-item--collection a:hover:after,
.header-nav-item--collection a:focus:after,
.header-nav-item--collection a:active:after {
	left: 0;
	right: auto;
	width: 100%;
}

I'm looking to add this exact same animation to my pagination titles when hovered over, but haven't had any luck so far.

Any help would be appreciated. 🙂

Try 

.item-pagination-link .item-pagination-title {
  position: relative;
}

.item-pagination-link .item-pagination-title:after {
  content: "";
  position: absolute;
  right: 0;
  width: 0px;
  bottom: -3px;
  background: #e19d9d;
  height: 1px;
  transition-property: width;
  transition-duration: .3s;
  transition-timing-function: ease-out;
  left:0;
  right: auto;
}

.item-pagination-link:hover .item-pagination-title:after {
  width: 100%;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
16 hours ago, addisonpann said:

You've done it again. Thanks a bunch, @bangank36.

How do you know which selectors to use? Are you just doing right click > inspect?

Basically, I inspect via dev tool of browser

image.thumb.png.10a82184be20c12ccac76470f9041ed3.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.