如何停止覆盖内容，使其仅覆盖背景?

Question

我使用::before作为覆盖层，但我面临的问题是覆盖层覆盖了包括内容(文本)在内的所有卡片，但我只想覆盖卡片的背景。由于这个问题，我无法选择任何文本。

/* left-to-right effect box */
.ltr-effect {
position: relative;
}
.ltr-effect::before {
content: "";
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 0%;
height: 100%;
background-color:rgba(215, 227, 250, 0.53);
transition: width 0.5s;
}
.ltr-effect:hover::before {
width: 100%;
}
/* card */
.service-content-box {
text-align: center;
border: 2px solid rgb(208, 228, 228);
background-color: #22beff;
border-radius: 10px;
padding: 30px;
font-size: 1.3em;
width: calc(90%/3);
margin-right: 5%;
position: relative;
}
/* content of services */
.service-content-box .service-title {
text-transform: capitalize;
margin-bottom: 10px;
font-size: 2em;
}
.service-content-box .service-desribtion {
line-height: 30px;
}
.service-content-box a {
margin: 7px 0px;
text-decoration: none;
text-transform: capitalize;
}

<section class="services">
<div class="services-content">
<div class="service-content-box ltr-effect">
<i class="fa fa-solid fa-book-open"></i>
<h4 class="service-title mg-b-10">fast reading</h4>
<p class="service-desribtion">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A fugiat, ea et iure similique nesciunt Et accusantium                              magni
</p>
<a href="#" class="read-more">learn more</a>
</div>
<div class="clear"></div>
</div><!-- /.services-content -->
</section><!-- /.services -->

Answer 1

你可以将position: relative; z-index: 1;设置为卡片中不想被覆盖的元素

您需要z-index来使它们出现在前面，并且您可能已经知道，z-index仅适用于非静态位置。这就是为什么我用那个相对位置。

/* left-to-right effect box */
.ltr-effect {
position: relative;
}
.ltr-effect::before {
content: "";
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 0%;
height: 100%;
background-color: rgba(215, 227, 250, 0.53);
transition: width 0.5s;
}
.ltr-effect:hover::before {
width: 100%;
}
/* card */
.service-content-box {
text-align: center;
border: 2px solid rgb(208, 228, 228);
background-color: #22beff;
border-radius: 10px;
padding: 30px;
font-size: 1.3em;
width: calc(90% / 3);
margin-right: 5%;
position: relative;
}
/* content of services */
.service-content-box .service-title {
text-transform: capitalize;
margin-bottom: 10px;
font-size: 2em;
position:relative;
z-index:1;
}
.service-content-box .service-desribtion {
line-height: 30px;
position:relative;
z-index:1;
}
.service-content-box a {
margin: 7px 0px;
text-decoration: none;
text-transform: capitalize;
position:relative;
z-index:1;
}

<section class="services">
<div class="services-content">
<div class="service-content-box ltr-effect">
<i class="fa fa-solid fa-book-open"></i>
<h4 class="service-title mg-b-10">fast reading</h4>
<p class="service-desribtion">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A fugiat, ea et iure similique nesciunt Et accusantium magni
</p>
<a href="#" class="read-more">learn more</a>
</div>
<div class="clear"></div>
</div>
</section>