Jump to content

Underline link when hovering over it

Go to solution Solved by Ziggy,

Recommended Posts

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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!

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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.

Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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!

Link to comment
  • Solution

Of course! You would want to replace the a with the selectors, and can be comma-separated. The reason for e.g. h1 a rather than just h1 or just a, is that combining the heading class and link class restricts the underline to instances where you have text that is both a heading 1 and a link.

p a, h1 a, h2 a, h3 a, h4 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);
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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!

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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?

Link to comment
9 minutes ago, Aurora said:

Does this code only apply to this specific section then?

Yes

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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);
    }
  }
}
Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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!

Link to comment
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!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

What link and where?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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!

Bildschirmfoto 2023-10-12 um 12.54.32.png

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.