Jump to content

Subheading Underline Animation Under Text Only

Recommended Posts

Site URL: https://onyxhive.com.au/cakes

Hey Guys,

Two things

I am trying to make the animation of my underline to just underline the word only not the whole box on a vertical list. This is my code:

//Subcategory Underline Animation
.category-item::after {
  content: '';
  background: #fff; //color
  height: 2px; //thickness
  width: 0;
  display: block;
  padding-top: 0px !important;
  transition: width 0.2s;
}

.category-item:hover::after {
  display: block;
  width: 100%;
}

But when I add this code:

.category-item {
  display: inline-block;
}

It underlines the words only which I wanted but now the subcategories are in a horizontal list, I need to keep it vertical.

I can't find a solution

  1. How do I make the underline animation underline the word only and not the full box?
  2. How do I make the underline closer to the word? I feel the underline is way too separated from the word, I would like it at least 2-3px closer to the word


Thanks

Edited by hasher22
Link to comment
On 11/24/2021 at 8:15 PM, hasher22 said:

Site URL: https://onyxhive.com.au/cakes

Hey Guys,

Two things

I am trying to make the animation of my underline to just underline the word only not the whole box on a vertical list. This is my code:

//Subcategory Underline Animation
.category-item::after {
  content: '';
  background: #fff; //color
  height: 2px; //thickness
  width: 0;
  display: block;
  padding-top: 0px !important;
  transition: width 0.2s;
}

.category-item:hover::after {
  display: block;
  width: 100%;
}

But when I add this code:

.category-item {
  display: inline-block;
}

It underlines the words only which I wanted but now the subcategories are in a horizontal list, I need to keep it vertical.

I can't find a solution

  1. How do I make the underline animation underline the word only and not the full box?
  2. How do I make the underline closer to the word? I feel the underline is way too separated from the word, I would like it at least 2-3px closer to the word


Thanks

Here is the testing result in my own

image.thumb.png.4b96218e28ece72b4a6b86f21555065f.png

It is the desired result you want to achieve?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Try adding to Home > Design > Custom Css

/*Setting the underline for sub nav*/
.header-nav-folder-content .header-nav-folder-item a {
  display: inline-block;
}
.header-nav-folder-content .header-nav-folder-item a:after {
  content: "";
  background: #fff;
  height: 1px;
  width: 0;
  display: block;
  transition: width 0.2s;
  margin: 0 auto;
}

.header-nav-folder-content .header-nav-folder-item:hover a {
  background: transparent !important;
  color: #fff !important;
}

.header-nav-folder-content .header-nav-folder-item:hover a:after {
  width: 100% !important;
}

/*Setting the underline for sub nav - end*/

Let me know how it works on your site

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 11/26/2021 at 4:55 PM, bangank36 said:

Let me know how it works on your site

Hi!

Thanks for the tinkering!

I wanted the underline to be with the subcategories on the left, not the drop down menu.

Edit: I half fixed it, its now going to 55% of the width not 100%. But would be nice to have it the width of each text

Untitled-2.jpg

Edited by hasher22
Link to comment
43 minutes ago, hasher22 said:

Hi!

Thanks for the tinkering!

I wanted the underline to be with the subcategories on the left, not the drop down menu.

Edit: I half fixed it, its now going to 55% of the width not 100%. But would be nice to have it the width of each text

Untitled-2.jpg

Try

.category-item::after {
  content: none;
}

.category-item a {
  display: inline-block !important;
}
.category-item a::after {
  content: "";
  background: #fff;
  height: 2px;
  width: 0;
  padding-top: 0px !important;
  transition: width 0.2s;
  display: block;
  position: absolute;
  margin: 0 auto;
}

.category-item a:hover:after {
  width: 100% !important;
}

Hope it helps you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing result

image.thumb.png.56904379ae0424efdb25fe8a7b56a0e2.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 4 months later...
On 4/6/2022 at 7:57 PM, Iwan said:

I hope you're willing to help?

On my homepage ,main title I'd like to animate one of the words, is this possible?

Can you share link to homepage?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
12 hours ago, Iwan said:

Hi there, @tuanphan I inserted a code to remove footer navigation underlines...but now I want to apply colour change on hover? Please can you help?

Add to Design > Custom CSS

footer.sections a:hover {
	color: #f1f !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.