html - 单击“显示更多”按钮后如何对行应用和删除褪色渐变

Question

我有一个页面显示用户提交的故事。每个故事只显示几行。有一个显示更多/显示更少按钮。我想在前几句话之后创建一个淡入淡出效果来强调还有更多要阅读的内容，但是我正在努力做到这一点。

我已经尝试将这个问题中的代码作为起点链接。尽管来自已接受答案的代码会淡化我的整个页面而不是单独的每个故事。最终目标是使第 3 行和第 4 行褪色然后不褪色，并且在按下显示更多按钮时显示整个故事并在按下显示更少时再次褪色。

编辑 20200813：将 post-text::before 位置修改为相对位置，由 @imvain2 突出显示。我可以看到它位于后文本类文本前面的所需位置。但是 ::before 在页面上没有物理尺寸。请看下面的截图：

$(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>

标签： htmljquerycss