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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

My testing result

image.thumb.png.56904379ae0424efdb25fe8a7b56a0e2.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
  • 4 months later...
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

Contact Customer Care - Learn CSS - Buy me a coffee (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.