I want to implement this hyperlink effect in posts on links.
Please take a look at:
CSS of this effect:
a {
text-decoration: none;
color: #18272F;
font-weight: 700;
position: relative;
}
a::before {
content: ”;
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 8px;
z-index: -1;
transition: all .3s ease-in-out;
}
a:hover::before {
bottom: 0;
height: 100%;
}
/* Presentational Styles */
body {
display: grid;
font-family: ‘Poppins’, sans-serif;
font-size: 27px;
line-height: 1.5;
height: 100vh;
place-items: center;
}
My existing CSS Code of hyperlink:
.td-page-content p span a {
color: green !important;
}
.td-page-content p span a{
background-color:white;
font-size:18px;
}
.td-post-content p span a span {
color: #2d756e !important;
font-size: 18px;
}
.td-post-content p span a {
color: #2d756e !important;
font-size: 18px;
}
.td-post-content li span a,
.td-post-content li a span,
.td-post-content a {
color: #2d756e !important;
font-size: 18px;
}
Hello @great1212!
Access an article and paste the following code into the Live CSS: https://prnt.sc/j36sOaJk_7rK
The code should be written like this:
.td-post-content a {
text-decoration: none;
color: #000!important;
font-weight: 700;
position: relative;
}
.td-post-content a::before {
content: "";
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 5px;
z-index: -1;
transition: all .3s ease-in-out;
}
.td-post-content a:hover::before {
bottom: 0;
height: 100%;
}
Thank you!
Hi, thanks for the quick response.
We have removed the previous CSS code and added the new one provided by you in the customization Live CSS, but it doesn’t reflect any changes.
It shows only plain black text with hover underline and no transition effect.
Please look at this picture:
Thanks
Best Regards,
Hello @great1212!
Oh, so that is another class to complete there. So, replace the code with the new one:
.td-post-content a, .td-post-content blockquote a {
text-decoration: none;
color: #18272F;
font-weight: 700;
position: relative;
}
.td-post-content a::before, .td-post-content blockquote a::before {
content: "";
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 8px;
z-index: -1;
transition: all .3s ease-in-out;
}
.td-post-content a:hover::before , .td-post-content blockquote a:hover::before{
bottom: 0;
height: 100%;
}
Thank you!
Hi Bettina,
We have carefully followed all your guidelines and pasted the new code. But, this code also seems not working and the same result repeats again as simple plain text with hover underline.
Please take a look at the picture . . .
Thanks
Hello @great1212!
For me it is working great: https://prnt.sc/P0dIozLh0v0W
Let me know how you’ve added the blockquote, so I can check on my end.
Thank you!
I have used the blockquote for adding it. But, I also use in plain text. But, neither is working.
Please check at this picture . . .
I mean to say neither any hyperlink in the post changes by the CSS code you provided earlier.
I want to use this effect on each hyperlink in the post, including body text and blockquotes.
I am also sending you the link of the article, so you can easily inspect the article elements at your end.
I was previously using this code to green color text and line on hover. This code is applying currently.
.td-post-content p span a span {
color: #2d756e !important;
font-size: 18px;
}
.td-post-content p span a {
color: #2d756e !important;
font-size: 18px;
}
.td-post-content li span a,
.td-post-content li a span,
.td-post-content a {
color: #2d756e !important;
font-size: 18px;
}
Please feel free for ask any queries.
Best Regards,
Hello @great1212!
The last code seems to work well: https://prnt.sc/YM85Kni3d5Ne
Or how would you like to work? Make a video of how you add the blockquote.
Thank you!
Hello Bettina, the problem is that the code is not working anymore in the plain text and block quotes.
I have used only code code and not seperate for plain text links and blockquotes.
I have only used one code previously that I sent to you that is working perfectly for each hyperlink in the post.
Plz confirm did you inspect the element in the post link that I provided to you?
I you don’t then please inspect this post in console and then tried putting the code to see the result
Hello @great1212!
Some parts of the code are working, also the color if you apply !important. We need to investigate why it is not working for you.
Contact us via email at contact@tagdiv.com and provide the following:
– admin url and credentials
– a link to this topic in order to identify you
Thank you!
