Wired.com Style Links

Support
#1

I have a client that’s asked if the links on his website can have the same style as those on the wired.com website. Here’s an example:

I can alter the underline height but I’ve tried a number of CSS and PHP tweaks to emulate the hover feature without success.

Any advice would be welcome.

TIA!

#2

Hi there,

Please try this code:

.entry-content a {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
    -webkit-transition: background .15s cubic-bezier(0.33, 0.66, 0.66, 1);
    -o-transition: background .15s cubic-bezier(0.33, 0.66, 0.66, 1);
    transition: background .15s cubic-bezier(0.33, 0.66, 0.66, 1);
    border-bottom: 3px solid #b4e7f8;
    -webkit-box-shadow: inset 0 -4px 0 #b4e7f8;
    box-shadow: inset 0 -4px 0 #b4e7f8;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
}

.entry-content a:hover {
    background-color: #b4e7f8;
}
#3

Thanks very much Jade! That works perfectly in all browsers except Safari for some reason.

If you can think of a tweak that would allow it to work with Safari as well it would truly be appreciated.

Thanks so much!

Rich

#4

Hi there,

I checked the code in the Safari Mac version 11 and it is working with no problem. Kindly clear your browser cache or use another device to check the website.

I am sure you will understand that this is a customization request which is outside of our support scope and my colleague did his best to give the starting code for your customization path.

Implementing cross-browser version and future maintaining of the code will be on your shoulders.

Thank you for your understanding.

#5

Hi Christopher. It is indeed working in all browsers now.

Thanks again!

#6

Glad we could help.

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.