Sitewide links hover CSS not working on blog posts

[JosephLucero]

Hello,

I have added a custom hover effect to all my links using CSS.

The hover effects work on everything besides posts and pages, it only applies to the Wordpress info bar when viewing the site. Along with everything on the backend Wordpress.

I applied the CSS to this class: a

Is there a link class specifically for posts? Or can I create one specifically for posts?

Here is the CSS used:

.a {
display: inline-block;
position: relative;
padding-bottom: 7px;
}
.a:before {
content: ‘’;
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 4px;
width: 0;
transition: width 0s ease, background .5s ease;
border-radius: 12px;
}
.a:after {
content: ‘’;
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 4px;
width: 0;
background : #83C9F4;
transition: width .5s ease;
border-radius: 12px;
}
.a:hover:before {
width: 100%;
background: #83C9F4;
transition: width .5s ease;
}
.a:hover:after {
width: 100%;
background: transparent;
transition: all 0s ease;
}

[friech]

Hi Joseph,

Thank you for writing in, you can use the selector .single-post a for targeting links on the posts.

e.g.

.single-post a {
	/*css rules here*/
}

Just so let you know and for the other users might see this thread, there is a Site Links Color option under Theme Options > Typography

Hope it helps,
Cheers!

[JosephLucero]

Hello, thank you for the suggestion. This ended up targeting links in my header, rather than links in the actual post.

[Prasant]

Hello Joseph,

Thanks for updating the thread.

Please replace previous code and use following CSS under X/Pro > Theme Options > CSS:

.single-post .entry-content a {
	/*css rules here*/
}

Thanks.

[JosephLucero]

@Prasant I owe you my life, it works, thank you

[ruenel]

You are most welcome!