How can I apply this CSS style for my in-posts links?

Hi there,

try:

.single .entry-content a {
  color: transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  text-shadow: 0 0 #141414, 0.08em 0 0 #fff, 0 0, -0.08em 0 0 #fff;
  vertical-align: bottom;
}
.single .entry-content a:after {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 20, 20, 0.8)), to(rgba(20, 20, 20, 0.8))) center 1.08em/100% 2px no-repeat;
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.8)) center 1.08em/100% 2px no-repeat;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0.25em;
  width: 400%;
  will-change: transform;
  pointer-events: none;
}
.single .entry-content a:hover:after {
  -webkit-animation: underline-gradient 6s linear infinite;
          animation: underline-gradient 6s linear infinite;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(122, 95, 255, 0.8)), color-stop(35%, rgba(1, 255, 137, 0.6)), color-stop(85%, rgba(122, 95, 255, 0.8)));
  background-image: linear-gradient(90deg, rgba(122, 95, 255, 0.8) 15%, rgba(1, 255, 137, 0.6) 35%, rgba(122, 95, 255, 0.8) 85%);
}

@-webkit-keyframes underline-gradient {
  0% {
    -webkit-transform: translate3d(0%, 0%, 0);
            transform: translate3d(0%, 0%, 0);
  }
  100% {
    -webkit-transform: translate3d(-75%, 0%, 0);
            transform: translate3d(-75%, 0%, 0);
  }
}

@keyframes underline-gradient {
  0% {
    -webkit-transform: translate3d(0%, 0%, 0);
            transform: translate3d(0%, 0%, 0);
  }
  100% {
    -webkit-transform: translate3d(-75%, 0%, 0);
            transform: translate3d(-75%, 0%, 0);
  }
}

Hi David,

Thank you very much for that! It worked! :)
But I noticed that they also appear on images that have links or are linked.
Is there a way to just apply this to text links only?

Thank you!

Yeah its why Link Styling is such a pain.
Can you link me to a post where i can see an image with a link?

I'm sorry about that.

Here's an example: https://thepcenthusiast.com/razer-kishi-game-controller-for-android-now-available/
It appears on the three images in the middle of the article.

Just a follow up, if it's more difficult or complicated to exclude.
Perhaps we can move or align the line effect at the bottom of the image instead?

Hmmm.... tricky one.
Try adding this:

a[href^="https://cdn"]:after {
    display: none !important;
}

It assumes all those image links are for the lightbox and therefore served over a CDN....

It is tricky!
Unfortunately, that didn't seem to work.

I saw a similar effect on Cloudway's site here https://support.cloudways.com/how-do-i-take-my-website-live-from-cloudways/
The the line effect shows up under the (link) image.
But I wasn't able to replicate it despite inspecting and copying their code.

Where did you add that CSS?

I add all the CSS under Customizing -> Additional CSS.

I didn't use Simple CSS plugin or child theme.
Should I?

Can you add it back in, and place it after all the other CSS. Then i can take a look to see why it isn't working.

Sorry about that. It looks like it is now working.
I added it back, cleared cache, cleared WP rocket, and it's now working!
The lines no longer appear -> https://thepcenthusiast.com/razer-kishi-game-controller-for-android-now-available/

Thank you very much!

You're welcome

Hi David,

Sorry to open again this thread. But I noticed that not only the images are affected by the style.
There are other text links that are affect.
I tried to research about CSS exclusion, but since I am not knowledgeable in this field, I'm not really sure how to implement it.

If you visit this page: https://thepcenthusiast.com/intel-core-i7-10700k-review/
You can see that the table of contents are affected with the effect.
Also if you scroll down, the CSS for the in page pagination (nextpage) are over ruled.
The page numbers 1 or 2 doesn't look right.

Any idea how to exclude them or at least prevent the effect from affecting this elements?

Thanks,

Hi there,

You'll need to target those items manually and remove the effect.

For example:

.single .entry-content .ftwp-item a:after,
.single .entry-content .page-links a:after {
    display: none;
}