Subheading Underline Animation Under Text Only

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

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

It is the desired result you want to achieve?

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

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

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

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

My testing result

10 hours ago, bangank36 said:

My testing result

THANK YOU!!

IT WORKED!!!!

Thank again for your hard work and tinkering for the community! 🙂

Hi @bangank36, I hope you're willing to help?

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

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?

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?

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

Great! Thank you so much!