I want to add a custom underline (PNG image) that appears upon hovering over text

Site URL: https://fiddle-reed-4bh7.squarespace.com/config/design/custom-css

More specifically, I'd like like it so that when I hover over a given option on the home page, a png appears beneath the text to underline it. As shown, I've photocopied rough, pen drawings/lines as a stylistic choice. It'd be cool to carryout this style in a number of ways throughout the site. So the PNGs would be of simple lines drawn in pen, but I'd want these lines to appear under each option upon a mouse hovering over that specific option. Take a look at the mockup below. Anybody have any ideas?

p.s. let me know if you need help accessing the website.

the issue you will have is that underlines are of variable length: "bippy" is a lot shorter than "and yet another" (which I know is a placeholder but you will still have variable lengths). 

However, it's a fun question, so let's have a go at answering it:

there are two approaches to this. use a background image and if you really want to get the lengths correct then stretch it. will probably look worse the wider it gets so you could also consider centring it.

you could put something like this into a code block on the page. you'll have to upload your image and replace the url, and you'll have to be more specific with your selector as this will target every link, but hopefully you get the idea. the background image will get clipped eventually so you might need to add extra padding around your links (second rule in the code block, but it's optional)

<style>
a:hover {
  background-image:url('https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1628968674461-KNFVNIA4PUHS80FLEOKE/Screenshot+2021-08-14+201631.png?format=2500w');
  background-repeat: no-repeat;
  background-size: auto;
  background-position:-15px 120%;
  }
  a {
    padding:20px;
  }
</style>

here's the example i made

I said there were two approaches. The second approach is to use a border-image which enables you to split your image up into a start, a repeated middle and an end. it's a lot harder to put together but would give you that variable length. As it's a lot harder I won't do the example here, but you could look up border-image css and see how it's done. you'd need to be a lot more careful about how you constructed your image, so if you can make the first approach work that would probably be advisable.

@iamdavehart Thanks so much for your help!

So just to make sure things look finished and appealing, my plan (if possible) was to use PNGs of a number of different line lengths that match the length of the text. That way I wouldn't have to stretch one image and compromise aesthetics. Below is a sample of various line lengths that I would cut, export as PNG files of a standardized height, and then include into Squarespace.

Now I'm imagining that makes things much more complicated or impossible. The reason why I can only imagine this is because I'm a coding novice, and even that is a generous title. If there's anything else you can give me or some solutions to this issue that would be awesome!

yes, that's fine. you upload all your images, set one rule that defines the background position for all your underlines and then set a rule for each one to set the background image. you do this with the nth-child selector.

e.g.

<style>
a:hover {
  background-repeat: no-repeat;
  background-size: auto;
  background-position:-15px 120%;
}
a {
  padding:20px;
}
a:nth-child(1):hover {
    background-image:url('https://image-one-url-goes-here');
}
a:nth-child(2):hover {
    background-image:url('https://image-two-url-goes-here');
}
</style>

this applies background images to links based on their order within their parent element. so you'd probably have to find the block id or parent class for the links you want to treat in this way and prefix all the rules with that id.

best way to do it is to publish your site with a password and post the url and password here so someone can help you place the images. (upload your images first

On 8/14/2021 at 2:26 PM, iamdavehart said:

the issue you will have is that underlines are of variable length: "bippy" is a lot shorter than "and yet another" (which I know is a placeholder but you will still have variable lengths). 

However, it's a fun question, so let's have a go at answering it:

there are two approaches to this. use a background image and if you really want to get the lengths correct then stretch it. will probably look worse the wider it gets so you could also consider centring it.

you could put something like this into a code block on the page. you'll have to upload your image and replace the url, and you'll have to be more specific with your selector as this will target every link, but hopefully you get the idea. the background image will get clipped eventually so you might need to add extra padding around your links (second rule in the code block, but it's optional)

<style>
a:hover {
  background-image:url('https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1628968674461-KNFVNIA4PUHS80FLEOKE/Screenshot+2021-08-14+201631.png?format=2500w');
  background-repeat: no-repeat;
  background-size: auto;
  background-position:-15px 120%;
  }
  a {
    padding:20px;
  }
</style>

here's the example i made

I said there were two approaches. The second approach is to use a border-image which enables you to split your image up into a start, a repeated middle and an end. it's a lot harder to put together but would give you that variable length. As it's a lot harder I won't do the example here, but you could look up border-image css and see how it's done. you'd need to be a lot more careful about how you constructed your image, so if you can make the first approach work that would probably be advisable.

 

 

I'm trying to do a similar thing, however the navigation links don't look the same as text links with the underline. 

Can you advise how I can customize this for the navigation? 

On 8/14/2021 at 2:26 PM, iamdavehart said:

the issue you will have is that underlines are of variable length: "bippy" is a lot shorter than "and yet another" (which I know is a placeholder but you will still have variable lengths). 

However, it's a fun question, so let's have a go at answering it:

there are two approaches to this. use a background image and if you really want to get the lengths correct then stretch it. will probably look worse the wider it gets so you could also consider centring it.

you could put something like this into a code block on the page. you'll have to upload your image and replace the url, and you'll have to be more specific with your selector as this will target every link, but hopefully you get the idea. the background image will get clipped eventually so you might need to add extra padding around your links (second rule in the code block, but it's optional)

<style>
a:hover {
  background-image:url('https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1628968674461-KNFVNIA4PUHS80FLEOKE/Screenshot+2021-08-14+201631.png?format=2500w');
  background-repeat: no-repeat;
  background-size: auto;
  background-position:-15px 120%;
  }
  a {
    padding:20px;
  }
</style>

here's the example i made

I said there were two approaches. The second approach is to use a border-image which enables you to split your image up into a start, a repeated middle and an end. it's a lot harder to put together but would give you that variable length. As it's a lot harder I won't do the example here, but you could look up border-image css and see how it's done. you'd need to be a lot more careful about how you constructed your image, so if you can make the first approach work that would probably be advisable.

 

 

@iamdavehart @tuanphan

Any help with this? 
 

I'm trying to do a similar thing, however the navigation links don't look the same as text links with the underline. 

Can you advise how I can customize this for the navigation? 

Website: https://lavender-caper-k5h2.squarespace.com/ 

Password: 123

@Anele0610

the code I posted for liam was more of a general pointer, so I wouldn't recommend using it "as is" as it would be applied very broadly which would probably lead to some unpredictable outcomes (as you're probably finding out)

the way that this sort of CSS code works is that rules have a specificity. so you need to work out which links in your site need the special treatment and then write css rules that hone in on that type of link or region of your site. the added issue is that squarespace do all their own formatting and you're fighting against that in some cases. You can see this from how your buttons are changing on hover (as squarespace use links for buttons).

just having a quick look at your site, I would say try to work out which links you want to apply it to. you'll probably need to have a slightly different treatment for each one to modify the placement of the background image.

here's an example. there are three rules here that override the colour of the link. each one gets more specific. if you apply these to your site you'll see that the header nav goes green, other links that aren't buttons go blue and buttons are red.

/* every link red. not very specific so will be overridden by later rule */
a { color:red !important; }
/* more specific (negative condidtion), color all links that are not buttons blue */
a:not(.sqs-block-button-element) { color:blue !important; }
/* more specific (positive selection), take links that are in navigation */
.header-nav-list a { color:green !important; }

so you could use something like this to hone in on the correct links to get your positioning right. 

I don't think that this is a great effect to be used widely, it upsets the flow of standard text and squarespace button layouts for example, but you could perhaps use something like the last rule to only apply it to the header which is a very consistant and predictable layout. so to do that, take the original code and just add .header-nav-list before the a. this means, find all "a elements" (links) that are children of the "header-nav-list".

that might get you somewhere, but this kind of effect is tricky to get right in a catch all situation

good luck!

2 hours ago, iamdavehart said:

@Anele0610

the code I posted for liam was more of a general pointer, so I wouldn't recommend using it "as is" as it would be applied very broadly which would probably lead to some unpredictable outcomes (as you're probably finding out)

the way that this sort of CSS code works is that rules have a specificity. so you need to work out which links in your site need the special treatment and then write css rules that hone in on that type of link or region of your site. the added issue is that squarespace do all their own formatting and you're fighting against that in some cases. You can see this from how your buttons are changing on hover (as squarespace use links for buttons).

just having a quick look at your site, I would say try to work out which links you want to apply it to. you'll probably need to have a slightly different treatment for each one to modify the placement of the background image.

here's an example. there are three rules here that override the colour of the link. each one gets more specific. if you apply these to your site you'll see that the header nav goes green, other links that aren't buttons go blue and buttons are red.

/* every link red. not very specific so will be overridden by later rule */
a { color:red !important; }
/* more specific (negative condidtion), color all links that are not buttons blue */
a:not(.sqs-block-button-element) { color:blue !important; }
/* more specific (positive selection), take links that are in navigation */
.header-nav-list a { color:green !important; }

so you could use something like this to hone in on the correct links to get your positioning right. 

I don't think that this is a great effect to be used widely, it upsets the flow of standard text and squarespace button layouts for example, but you could perhaps use something like the last rule to only apply it to the header which is a very consistant and predictable layout. so to do that, take the original code and just add .header-nav-list before the a. this means, find all "a elements" (links) that are children of the "header-nav-list".

that might get you somewhere, but this kind of effect is tricky to get right in a catch all situation

good luck!

Hey @iamdavehart,

You're a legend! 

Question though, the 'not' rule is what I'm looking for, but how do i add into it that i also don't want the header-nav-list to take the "a:" rule with the underline? 

I have this now: 

 a:hover:not(.sqs-block-button-element) { 
background-image:url('https://static1.squarespace.com/static/61928c24fdc48e682e4413a6/t/61928e165dbe7e3fed8afeb3/1636994582380/Piestukai.png');
  background-repeat: no-repeat;
  background-size: 80%;
  background-position:50%;
  padding-bottom:40px;
}

But ideally i'd like for the "not" rule to have button+navigation. 

What is the correct CSS way to write this?

Thanks!!!

a:not(.sqs-block-button-element, .header-nav-list a) { 
    color:red !important; 
}

comma separate the selectors that you don't want to hit. I still think that this is not specific enough a rule, you'll probably find a lot of random links that squarespace use that you'll have to keep adding to your exceptions list, might use different classes on mobile etc.

e.g. you'll notice that your main icon in the header is a link too so that has an odd behaviour on it, so you'd need to widen your exceptions to exclude the whole header. e.g.

a:not(.sqs-block-button-element, .header-nav-list a, header a) { 
    color:red !important; 
}

just putting it here for information purposes. My advice would be to try to be specific/inclusive on your rules rather than broad/exclusive.

On 11/18/2021 at 4:39 AM, iamdavehart said:

a:not(.sqs-block-button-element, .header-nav-list a) { 
    color:red !important; 
}

comma separate the selectors that you don't want to hit. I still think that this is not specific enough a rule, you'll probably find a lot of random links that squarespace use that you'll have to keep adding to your exceptions list, might use different classes on mobile etc.

e.g. you'll notice that your main icon in the header is a link too so that has an odd behaviour on it, so you'd need to widen your exceptions to exclude the whole header. e.g.

a:not(.sqs-block-button-element, .header-nav-list a, header a) { 
    color:red !important; 
}

just putting it here for information purposes. My advice would be to try to be specific/inclusive on your rules rather than broad/exclusive.

That's awesome, you're the best! 

Hi @iamdavehart, we are working on adding a custom image as an underline to some secondary navigation categories for our team page, and I can't for the life of me figure out how to adjust the position so the olive branch is beneath the "Our Flock" text. Any help or tips you have for this would be greatly appreciated! The link to the hidden page is below. https://www.thedoveagency.com/our-team-our-flock Thank you!

On 10/26/2023 at 3:24 AM, Dovely2023 said:

Hiwe are working on adding a custom image as an underline to some secondary navigation categories for our team page, and I can't for the life of me figure out how to adjust the position so the olive branch is beneath the "Our Flock" text. Any help or tips you have for this would be greatly appreciated! The link to the hidden page is below. https://www.thedoveagency.com/our-team-our-flock Thank you!

The order looks fine. Can you take a screenshot & Describe it a bit clearly?

On 10/26/2023 at 9:52 PM, tuanphan said:

The order looks fine. Can you take a screenshot & Describe it a bit clearly?

Hi @tuanphan thank you. Below is a screenshot of where the olive branch is currently, and the red line is where I would like it to be. Any ideas to achieve that? 

On 11/1/2023 at 10:58 PM, Dovely2023 said:

Hi @tuanphan thank you. Below is a screenshot of where the olive branch is currently, and the red line is where I would like it to be. Any ideas to achieve that? 

Do you have image url? Or which code did you use? We can adjust it easier

On 11/3/2023 at 2:10 AM, tuanphan said:

Do you have image url? Or which code did you use? We can adjust it easier

Hi @tuanphan yes please see below for the code. Let me know what you think. Thank you again. 

<style>
#block-yui_3_17_2_1_1684962694801_58555 h1 a {
  border-bottom-width: 0px !important;
  background-image: url('https://images.squarespace-cdn.com/content/v1/5e9f349ae3ca3476c8c63202/88e9f816-dbcd-40be-8558-2f00c630e9f7/Dove+Gold+Branch-02.png?format=2500w');
  background-size: 8rem;
  background-repeat: no-repeat;
  background position: -15px 120%;
  }
</style>

On 11/7/2023 at 1:11 AM, Dovely2023 said:

Hi @tuanphan yes please see below for the code. Let me know what you think. Thank you again. 

<style>
#block-yui_3_17_2_1_1684962694801_58555 h1 a {
  border-bottom-width: 0px !important;
  background-image: url('https://images.squarespace-cdn.com/content/v1/5e9f349ae3ca3476c8c63202/88e9f816-dbcd-40be-8558-2f00c630e9f7/Dove+Gold+Branch-02.png?format=2500w');
  background-size: 8rem;
  background-repeat: no-repeat;
  background position: -15px 120%;
  }
</style>

Change it to this

<style>
  #block-yui_3_17_2_1_1684962694801_58555 h1 a:after {
  content: "";
  border-bottom-width: 0px !important;
  background-image: url('https://images.squarespace-cdn.com/content/v1/5e9f349ae3ca3476c8c63202/88e9f816-dbcd-40be-8558-2f00c630e9f7/Dove+Gold+Branch-02.png?format=2500w');
  background-size: 8rem;
  background-repeat: no-repeat;
  display: block;
  background-position: center center;
  width: 8rem !important;
  height: 50px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  }
</style>

Hello, just wondering, am I the only one getting a syntax error on the first line of this code?

Thanks.

On 10/28/2024 at 8:10 PM, recycledfashion said:

Hello, just wondering, am I the only one getting a syntax error on the first line of this code?

 

Thanks.

Which code are you referring to?