How to Apply and Remove Faded Colour Gradient to rows after clicking Show More button

Question

I have a page showing user submitted stories. Each story only showing a few lines. There is a show more / show less button. I would like to create a fade effect after the first few sentences to accentuate there is more to read, however I'm struggling to do this.

I've tried the code from this question as a starting point link. Though the code from the accepted answer fades my whole page not each story separately. The end goal is to have the 3rd and 4th lines fading and then unfaded and the whole story shown on pressing the show more button and faded again when pressing show less.

EDIT 20200813: Amended the post-text::before position to relative, highlighted by @imvain2. I can see it's in the desired position in front of the post-text class text. But the ::before has no physical dimensions on the page. See screenshot below:

$(document).ready(function() {

  $(".content").on("click", '.showMore', function() {

    var $this = $(this);

    var content = $this.prev()
    var linkText = $this.text().toUpperCase();

    if (linkText === "SHOW MORE") {
      linkText = "Show less";
      $this.siblings('div').css('height', 'auto');
      var currHeight = $this.siblings('div').height();
       $this.siblings('div').css('height', '6em');
       $this.siblings('div').animate({height: currHeight}, 500);
    } else {
       $this.siblings('div').animate({height: '6em'}, 500);
      linkText = "Show more";
    }

    $this.text(linkText);
  
  });

});

.post-text:before {
  content:'';
  width:100%;
  height:100%;    
  position:relative;  <!-- Edit 20200813 !-->
  left:0;
  top:0;
  background:linear-gradient(transparent 150px, white);
}

.post-text {
    letter-spacing: normal;
    line-height: 2;
    font-size: 16px;
    font-family: Times, serif;
    color: black;
    text-align: justify;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div class="post">
    <div class="hideContent" style="height: 6em;">
      <div class="post-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean 
        semper, ligula quis gravida pretium, ligula arcu vestibulum mi, et 
        laoreet mauris ex at est. Donec pulvinar laoreet mollis. </div>
        <div class="post-action">
        <input type="button" value="Like" id="like_93" class="like">
        <span class="likesTotal" id="likes_93">0</span>
      </div>
    </div>
      <div class="showMore">Show more</div>
  </div>
</div>