我想对卡片的文本实现褪色效果，如下图所示：image1
为了实现这种效果，我使用以下CSS对文本伪元素的背景应用了线性渐变：

.card-content .text {
    font-size: .9em;
    text-align: left;
    height: 100px;
    overflow: hidden;
}

.card-content .text:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, white, transparent)
}

然而，我得到的结果与我预期的不同。淡入淡出效果不会在文本内容的底部结束，而是在“查看更多”按钮的底部结束，如下图image2所示
我对此感到困惑，因为text和button是独立的元素，我只对text的伪元素应用了线性渐变风格。我的假设是，在文本的伪元素上使用position: absolute导致了这个问题，因为绝对定位将元素从文档流中取出。我的假设正确吗？
当我将position: relative添加到text元素中时，如下面的CSS所示，我能够实现所需的外观：

.card-content .text {
   ** position: relative; **
    font-size: .9em;
    text-align: left;
    height: 100px;
    overflow: hidden;
}

.card-content .text:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, white, transparent)
}

但是，我不知道为什么这解决了这个问题。这让我想知道，一般来说，当使用伪元素并对它们应用绝对定位时，是否建议始终对原始元素使用相对定位。如果有人能解释一下，我将不胜感激。
以下是完整的HTML和CSS代码供参考：

HTML

<div class="card">
            <div class="card-img">
                <img src="imgs/img1.jpg" alt="">
            </div>
            <div class="card-content">
                <p class="text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <span class="see-more-btn"> See More </span>
            </div>
     </div>

CSS

.card {
    position: relative;
    background: #fff;
    width: 350px;
    box-shadow: 0 5px 25px rgba(2, 2, 2, 0.25);
    border-radius: 10px;
    overflow: hidden;
}

.card .card-img {
    position: relative;
    width: 350px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card .card-img img {
    width: 100%;
    height: 100%;
}

.card-content {
    position: relative;
    text-align: center;
    margin: 15px;
}

.card-content .text {
    **position: relative; **
    font-size: .9em;
    text-align: left;
    height: 100px;
    overflow: hidden;
}

.card-content .text:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, blue, transparent)
}