[Support request] Underline CSS for links

[Denise]

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!
Denise

[Ying]

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;
}

[Denise]

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!

[Ying]

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?

[Denise]

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!
Denise

[Ying]

Can you link me to the page in the video?

[Denise]

Sure thing.
https://hogarense.com/que-es-una-compostera/

Thanks!

[Ying]

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;
}

[Denise]

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?

[Ying]

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?

[Denise]

Thanks Ying!
I guess not a proper question to ask on this forum.
🤷‍♀️

[Ying]

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!

[Author]

Posts