Fading out paragraph of member-only post instead of call to action!

Themes
1

I’m trying to fade out the last paragraph ahead of the public preview line in this member-only post, but currently all I’m managing to do is fade the call to action! Please can anyone help me apply the fade only to the paragraph above, and not the CTA?

I’m using this code adapted from a Bright Themes tutorial.

.gh-content { position: relative; }
.gh-content:after {
z-index: 0;
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: min(100%, 100px);
background: linear-gradient(transparent, #fff 50%);
}

As you can tell, I’m a bit clueless, so any assistance will be gratefully received. M

2

The call to action is within .gh-content, I’m guessing. So I’d target instead something like .gh-content > p:last-child instead.

3

Thanks very much, Cathy. Apologies for my ignorance, but how would I alter the code above to do this?

4

You can try this:

.gh-content :has(+ .gh-post-upgrade-cta) {
  position: relative;
}

.gh-content :has(+ .gh-post-upgrade-cta)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, white 80%);
}

.gh-content :has(+ .gh-post-upgrade-cta) selects the element (last paragraph) before the upgrade CTA element.

5

That works. Thank you very much. :grinning_face: