Archived topic
Help with hover for hiperlinks
5 replies · Started by pancakebg on May 14, 2018
Hey guys, i know u don't have to answer to this question cuz it's not about any kind of situation with GP. I would be very grateful if u can help me with this.
I'm using this CSS line for hover effect on the anchor links on my site.
a {
display: inline-block;
text-decoration:none
}
a:after {
content: "";
display: block;
width: 0;
border-bottom: 1px solid;
margin: 0 auto;
transition:all 0.3s linear 0s;
}
.inside-article a:hover:after {
width: 100%;
}
The problem is i get the effect on the links on the articles in the blog categories.
- the title.
- the photo.
- and the "read more" button.
And it does not look good.
Is there a way to get the effect only for links in the main content area (container) like in the picture here:
https://s31.postimg.cc/lsraj2lrf/PLS.jpg
Thank you!
Hi, you can try targeting just the single post elements with something like this:
.single-post .inside-article a:after {
content: '';
display: block;
width: 0;
border-bottom: 1px solid;
margin: 0 auto;
transition:all 0.3s linear 0s;
}
.single-post .inside-article a:hover:after {
width: 100%;
}I will try that right now, thank you David!
It worked great, thanks again! :)
Best support ever!
But now i don't have the hover effect on some articles which are written on pages.
Can i add some page ID to make an exception or something?
You could try this, it should add it to articles except those on archives:
body:not(.blog) .inside-article a:after,
body:not(.archive) .inside-article a:after, {
content: '';
display: block;
width: 0;
border-bottom: 1px solid;
margin: 0 auto;
transition:all 0.3s linear 0s;
}
body:not(.blog) .inside-article a:hover:after,
body:not(.archive) .inside-article a:hover:after {
width: 100%;
}
