- This topic has 11 replies, 2 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
Hola!
I have this css on my site.
.entry-content a { text-decoration:none; border-bottom: 1px solid #EC6F74; box-shadow: inset 0 -1px #EC6F74; color: inherit; transition: background 0.1s cubic-bezier(.33,.66,.66,1);} .entry-content a:hover { background: #FAE8E9; }I’ve recently removed Elementor and now using only GP my underlines appears to be more separated from the text.
I can’t find how to get the underline closer to the text.Thanks for your help!
DeniseCustomer Support
Hi there,
Try changing your CSS to this:
.entry-content a { text-decoration: underline; color: inherit; transition: background 0.1s cubic-bezier(.33,.66,.66,1); text-decoration-color: #ec6f74; text-decoration-thickness: 2px; }Hi Ying!
Thanks for the suggestion, however when I do that it does get the underline to the “normal” position, but the hover effect in my case a highlight, seems to keep appearing wide, looks weird.Is there a way to correct that?
Thank you!
but the hover effect in my case a highlight, seems to keep appearing wide, looks weird.
Yes, it’s just a background color, so it will cover the entire link.
What would you like it to be?
Thanks Ying, it is a small detail.
Please take a look.
I was expecting the highlight the same “width” than the line, but maybe that’s how it is supposed to work.Thanks!
DeniseCan you link me to the page in the video?
Sure thing.
https://hogarense.com/que-es-una-compostera/Thanks!
Try remove your current CSS and add this:
.entry-content a:hover:before { height: 17px; } .entry-content a { position: relative; z-index: 5; text-decoration:underline; text-decoration-color: #ec6f74; text-decoration-thickness: 2px; } .entry-content a:before { height: 0; transition: all 0.5s ease; content: ""; position: absolute; bottom: 8px; left: 0; right: 0; background-color: #ec6f7426; z-index: -1; }Hi Ying!
I was not getting the results that I was looking for.
I’ve tried other CSS but all of them seem to keep a similar spacing between the letters and the underline.I’ve replaced it for this:
.entry-content a { display: inline-block; position: relative; text-decoration: none; color: #EC6F74; } .entry-content a::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 0; left: 0; background-color: #EC6F74; transform-origin: bottom right; transition: transform 0.25s ease-out;} .entry-content a:hover::after { transform: scaleX(1); transform-origin: bottom left;}But now I see that when there are long sentences it moves everything down to another line.
Is it possible to fix that?What’s wrong with my code? Can you tell me what’s not working so I can modify my code instead of reading through another code from 3rd party and trying to modify that?
Thanks Ying!
I guess not a proper question to ask on this forum.
🤷♀️No worries, I’m just trying to help and trying to understand what you want to achieve 🙂
If my tone didn’t sound friendly, that was not my intention and I apologize for that.
Let me know!
- You must be logged in to reply to this topic.
