Underline link when hovering over it

Hi,

I added the following code to remove the underline from links on my website:

a {

  background-size: 0px !important;

  text-decoration: none !important}

This is working.

What I would like to do next is for the underline to appear when I hover over the link. Is this possible?

My website: https://www.kristinkuehn.com

My password: 2eRFn7gQ

Many thanks!

Try this:

a {
  background-size: 0px !important;
  text-decoration: none !important;
  border-bottom: 2px solid rgba(0,0,0,0);
  transition:ease-in-out 300ms;
  &:hover {
    border-bottom: 2px solid rgba(0,0,0,1);
  }
}

11 minutes ago, Ziggy said:

Try this:

a {
  background-size: 0px !important;
  text-decoration: none !important;
  border-bottom: 2px solid rgba(0,0,0,0);
  transition:ease-in-out 300ms;
  &:hover {
    border-bottom: 2px solid rgba(0,0,0,1);
  }
}

Is it possible to have it in this color: #FE5AA9 and possibly a little thinner?

Thanks again!

Here you go:

a {
  background-size: 0px !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(254, 90, 169, 0);
  transition:ease-in-out 300ms;
  &:hover {
    border-bottom: 1px solid rgba(254, 90, 169 ,1);
  }
}

10 minutes ago, Ziggy said:

Here you go:

a {
  background-size: 0px !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(254, 90, 169, 0);
  transition:ease-in-out 300ms;
  &:hover {
    border-bottom: 1px solid rgba(254, 90, 169 ,1);
  }
}

That's exactly what I had in mind! However, now I also get underlines where I don't want them: for my site title, my site navigation, and in the blog sections. Is it possible to have these not in the header and not in the blog sections? I want them in the blog posts themselves, just not in the sections (it underlines the black title in pink, which I don't like, and it underlines the already underlined "read more" link.) If that's too complicated, I understand.

Your code was targeting all links, if you want to limit it you can by just using certain selectors

p a, h1 a, h2 a, h3 a, h4 a

That would cover just paragraph and headings.

18 hours ago, Ziggy said:

Your code was targeting all links, if you want to limit it you can by just using certain selectors

p a, h1 a, h2 a, h3 a, h4 a

That would cover just paragraph and headings.

Thanks, Ziggy! May I ask you a few follow-up questions?

1. Where would I place the selector in the last code that you sent?

2. Would I need to enter the code for each selector individually, or can I list them all at once and separate them using a comma?

3. What does the "a" stand for where you list the selectors? I thought it would just be "h1" but you say "h1 a."

Many thanks!

Hi Ziggy,

Thanks so much, that works great now.

I have a related question about adding an underline upon hovering to a secondary button. Is that something that you can reply to? Otherwise, I would make a new post.

Many thanks!

2 minutes ago, Aurora said:

adding an underline upon hovering to a secondary button

What do you want a button with an underline to look like?

3 hours ago, Ziggy said:

What do you want a button with an underline to look like?

I already built the button.

My website is https://www.kristinkuehn.com

Password: 2eRFn7gQ

Is there a way to assign code to a secondary button? Or would it be easier if I created a simple link instead of a button?

Thanks again!

8 minutes ago, Aurora said:

Is there a way to assign code to a secondary button? Or would it be easier if I created a simple link instead of a button?

Given that you want the button to look like a link, it would be much better to have it as a link.

7 minutes ago, Ziggy said:

Given that you want the button to look like a link, it would be much better to have it as a link.

I was wondering if that was the case...

The only issue that I have is that I want this particular underline to be in orange, not pink, to match the color of the font. Is that possible? Is there a code that automatically assigns the color that the font text has versus entering a specific color code?

Thanks again!

If you add the link I can try and help you out with that specific underline.

54 minutes ago, Ziggy said:

If you add the link I can try and help you out with that specific underline.

My website: https://www.kristinkuehn.com

Password: 2eRFn7gQ

I copied that section on the homepage — the second one is the one with the link.

Thanks so much!

try this:

section[data-section-id="651d51ea513ae744080958af"] {
  a {
    background-size: 0px !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 165, 51, 0);
    transition:ease-in-out 300ms;
    &:hover {
      border-bottom: 1px solid rgba(255, 165, 51 ,1);
    }
  }
}

9 minutes ago, Ziggy said:

try this:

section[data-section-id="651d51ea513ae744080958af"] {
  a {
    background-size: 0px !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 165, 51, 0);
    transition:ease-in-out 300ms;
    &:hover {
      border-bottom: 1px solid rgba(255, 165, 51 ,1);
    }
  }
}

You're a wizard, thank you!

Does this code only apply to this specific section then?

9 minutes ago, Aurora said:

Does this code only apply to this specific section then?

Yes

On 10/4/2023 at 6:38 PM, Ziggy said:

Yes

I added links to the illustrations in that same section, and when I hover over them, they also have this orange line. Is it possible to not have that?

You could swap the previous code for this one that specifically just targets the three links:

#block-2ba31009063cce87a789, #block-fc74d1c7d4b23b39c76e, #block-yui_3_17_2_1_1696404699330_5544 {
  a {
    background-size: 0px !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 165, 51, 0);
    transition:ease-in-out 300ms;
    &:hover {
      border-bottom: 1px solid rgba(255, 165, 51 ,1);
    }
  }
}

28 minutes ago, Ziggy said:

You could swap the previous code for this one that specifically just targets the three links:

#block-2ba31009063cce87a789, #block-fc74d1c7d4b23b39c76e, #block-yui_3_17_2_1_1696404699330_5544 {
  a {
    background-size: 0px !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 165, 51, 0);
    transition:ease-in-out 300ms;
    &:hover {
      border-bottom: 1px solid rgba(255, 165, 51 ,1);
    }
  }
}

Thank you, that's perfect! I appreciate all of your help with this!

16 minutes ago, Aurora said:

Thank you, that's perfect! I appreciate all of your help with this!

No problem, thank you for liking my comments!

Hi @Ziggy,

I'd like to change something in this link that you helped me to style (the arrow), but when I do that, the link goes back to the regular link color (pink, not orange). Is there a way that I can change the link without loosing the formatting?

Many thanks!

What link and where?

10 minutes ago, Ziggy said:

What link and where?

The three links to my scheduling page in my services section on my homepage: "Book an initial reading" etc.

https://www.kristinkuehn.com/

Pw: 2eRFn7gQ

You gave me code to have the links appear in orange:

#block-2ba31009063cce87a789, #block-fc74d1c7d4b23b39c76e, #block-yui_3_17_2_1_1696404699330_5544 {
  a {
    background-size: 0px !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 165, 51, 0);
    transition:ease-in-out 300ms;
    &:hover {
      border-bottom: 1px solid rgba(255, 165, 51 ,1);
    }
  }
}

They work fine. But, when I want to edit the link text to replace the arrow, it switches back to pink.

1. Is there a way that I can edit these links without the style to change?

2. I'm having trouble with arrow symbols on my site. When I insert an arrow, it looks different depending on the device and browser I use.

I attached a screenshot of a section further down on my homepage. I want the right arrow, both in that link and in the three services link above, but when I remove the left arrow in this link, the right arrow will switch to look different. Do you know why that is?

Many thanks!