Hyperlink underline customization

Site URL: https://menos.cc

Hey! I was wondering: is there a way to customize all website's hyperlink styles? I wanted the underline to be a dotted line, is it possible?

Add to Home > Design > Custom CSS

.black-bold .sqs-block-html a, .black-bold .image-title-wrapper a, .black-bold .image-subtitle-wrapper a, .black-bold .sqs-image-caption a, .black-bold .sqs-block-newsletter a {
    background-image: none !important;
    border-bottom: 1px dotted white;
}

Much appreciated 🙂

There's a problem now, see if you can help me:

ALL hyperlinks are being styled with this underline, including my icons and stuff. Can I target only the TEXT hyperlinks?

Hi there, 

Following on from this, I've added middle underline hover effect to navigation on site in 7.1 - trying to do the same for hyperlinks within the site for consistent look and feel. This is the css code for the middle navigation line used (https://www.ghostplugins.com/steps/8gk3nf7j). Any help for code to add same effect to hyperlinks would be appreciated.

Thanks.

19 hours ago, MarcUK1603 said:

Hi there, 

 

Following on from this, I've added middle underline hover effect to navigation on site in 7.1 - trying to do the same for hyperlinks within the site for consistent look and feel. This is the css code for the middle navigation line used (https://www.ghostplugins.com/steps/8gk3nf7j). Any help for code to add same effect to hyperlinks would be appreciated.

Thanks.

 

Hi. Can you share your site url? We can check easier

9 hours ago, tuanphan said:

Hi. Can you share your site url? We can check easier

Hi, sure. Here you.

https://mandarin-circle-ndlm.squarespace.com/home

20tyde21!

On 6/11/2021 at 6:59 PM, MarcUK1603 said:

Hi there, 

 

Following on from this, I've added middle underline hover effect to navigation on site in 7.1 - trying to do the same for hyperlinks within the site for consistent look and feel. This is the css code for the middle navigation line used (https://www.ghostplugins.com/steps/8gk3nf7j). Any help for code to add same effect to hyperlinks would be appreciated.

Thanks.

 

apply effect on Page Content Links/Footer links?

Some links in page content have underline. How about them? Remove underline & add hover effect?

Yes, it's just on hyperlinks - see attached. With underline removed and only showing on hover - same behaviour as nav links and buttons in hero panels at top of page(s). 

Thanks

M

So... I've kind of figured it out. I've added the CSS code below which has added the animation, but it's overlaying on top of default hyperlink underline. How can I remove the default that's still appearing and make this new code only what is read? I've added '!important' but it's not done the trick. Help... ! 🙂

// Fade Out Line Sub Nav - Middle Stretch Out //
h4 a{
  display: inline-block;
  float: none!important; 
}

h4 a:hover:after{
  transform: scaleX(1)!important;
}

h4 a:after {
  display:block;
  content: '';
  border-bottom: solid 2px #000000!important; 
} 
h4 a:after {
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
  z-index: 999!important;
 }

Figured it out. All sorted. Actually quite proud of myself 🙂

@MarcUK1603 - can you share the code pls?

On 11/14/2021 at 11:06 AM, LeeLee said:

@MarcUK1603 - can you share the code pls?

If you still have problem, just share link to page where you use underline, we can help easier