Jump to content

Hover effect for text links inside paragraphs

Recommended Posts

  • Replies 2
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • 1 year later...

Hi, did that help you?

I faced a similar situation, and what did the trick for me was this:

a span:hover {

text-decoration: underline;

color: #F9C761


When dealing with adding links to specific words within a text box, like a paragraph, the HTML structure often involves a <div> containing a <p> with an <a> for the link, and then a <span> for styling effects. To make sure the hover effect (underline and color change) only applies to the linked words, the provided code comes in handy. Keep in mind that it has a global impact, so if your text has a link in the footer, the hover effect will apply there as well.


On the other hand, when working with navigation items, things are more straightforward. You can simply use:

a:hover {
    /* Add your styling here */


Hope this helps!


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.