Underline CSS for links

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

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