[Resolved] Link effect with underline over click and hover

[Dev]

Hello,

Please the below video for a clear understanding. I want to that when we hover or click, the same effect will occur.

https://share.getcloudapp.com/Z4uq0AL2

I tried to find a solution and came across a few CSS, but all that was not working.

Please note I want that effector only for blog posts.

[Dev]

Hello,

No update on this query.

[David]

Hi there,

please note we aim to answer all topics within 24hrs, our average is below 5hrs, please afford us a little patience when waiting for a reply.

Try this CSS:

@media (min-width: 769px) {
  .entry-content p a {
    position: relative;
  }
  .entry-content p a::after {
      content: "";
      position: absolute;
      right: 0;
      left: 50%;
      bottom: 0;
      -webkit-transform: translate3d(-50%,0,0);
      transform: translate3d(-50%,0,0);
      display: block;
      width: 0;
      height: 2px;
      background-color: currentColor; /* Change color to #xxxxx if required */
      transition: 0.3s width ease;
  }
  .entry-content p a:hover::after {
      width: 100%;
  }
}

[Dev]

Thanks

[David]

You’re welcome

[Dev]

Hello,

https://share.getcloudapp.com/04uNBodp

I want ONE small change. That on hover or clicking the link, the horizontal line color should become this #459285… Only the line color I’m saying not about the font color. Font should remain default black.

[David]

In the CSS provided i commented the line you need to change ie.

background-color: currentColor; /* Change color to #xxxxx if required */

So this would become:

background-color: #459285;

[Dev]

Thanks, it’s done.

I have other unresolved query this https://generatepress.com/forums/topic/main-navigation-mobile-view-issue/

[David]

You’re welcome.
I believe Tom has responded to the other topic

[Author]

Posts