How to Add Hover Underline on Body Content Only

Support
#1

Hello,

I want to use the following style on Hyperlinks but nowhere else, not in Navbar, Buttons, Icons or Images or Blog Titles.

a {
text-decoration:none;
border-bottom: 1px solid #0D5D78 ;
box-shadow: inset 0 -4px 0 #0D5D78 ;
color: #000000;
transition: background 0.1s cubic-bezier(.33,.66,.66,1);
}

When it works, it will look something like this:

Can you please tell me what X object I need to attribute this to in my custom CSS?

Thank you in advance.

#2

Hello Pam,

Thanks for writing in!

You can add following CSS under X/Pro > Theme Options > CSS:

.entry-content a, .x-main.left a {
    text-decoration: none;
    border-bottom: 1px solid #0D5D78;
    box-shadow: inset 0 -4px 0 #0D5D78;
    color: #000000;
    transition: background 0.1s cubic-bezier(.33,.66,.66,1);
}

Thanks.

#3

Thanks Prasant this is great.

Just two things. I don’t want hyperlinkt to show on Collapsible Section:
https://www.westsidevirtual.com/website-design-faqs/

and I don’t want the hyperflink to show up on Blog Titles or Categories like here:
https://www.westsidevirtual.com/blog/

Otherwise it’s looking great.

Thank you again for your quick response.

#4

Hi Pam,

Please add this to Theme Options > CSS as well.

/*exclude accordion, entry title, and meta category*/
a.x-accordion-toggle,
.entry-title a,
.p-meta a {
	border-bottom: 0 !important;
	box-shadow: none !important;
}

Hope it helps,
Cheers!

#5

This was most helpful, thank you Friech!

#6

You’re most welcome, Pam!

You might want to check these links for further reading:

Hope this helps.

1 Like
#7

Thank Jade for your help and links!

#8

You’re welcome!

#9

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