div 相对于父级的位置

Question

我试图相对于他的父级定位一个div，以使yelllow匹配"GRATUITE"文本(如"MAGIQUE"文本，但我使用了边距，我不想将其用于响应式(，但它没有按照我想要的方式工作。

.title-accompagne2{
font-family: 'DM Serif Display',serif;
display: inline-block;
text-align: left;
color: #f79089 !important;
font-size: 32px !important;
margin-top: -20px;
margin-left: 0px !important;
font-weight: 500;
margin-bottom: 10px;
}
.surligneur-lettre-gratuite1 {
position: relative;
background-color: #F8F723;
width: 150px;
height: 16px;
z-index: -5;
bottom: 20px;
}

<div class="title-accompagne2" style="text-align: left; margin-top: 40px !important;">
<div style="color:#f79089 !important; font-size: 32px !important; margin-left: 0px !important;">
LA LETTRE
<span style="z-index: 6;position: relative;">GRATUITE</span>
<div class="surligneur-lettre-gratuite1"></div>
</div>
<p style="color:#f79089 !important; font-size: 32px !important; margin-top: -20px; margin-left: 0px !important;">ET
<span style="z-index: 6; position: relative;">MAGIQUE</span>
</p>
<div
style="width: 155px; z-index: -5; height: 16px; transform: translate(2.5px, -49px);margin-left: 42px; background-color: #F8F723;">
</div>
</div>

Answer 1

这是一个简单的背景任务，无需过于复杂：

.title-accompagne {
font-family: 'DM Serif Display', serif;
display: inline-block;
color: #f79089;
font-size: 32px;
font-weight: 500;
}
span {
background: 
linear-gradient(#F8F723, #F8F723)  /* coloration */
bottom  /* position */
/ 
100% 50% /* width height */
no-repeat;
}

<p class="title-accompagne">
LA LETTRE <span>GRATUITE</span> <br>ET <span>MAGIQUE</span>
</p>

Answer 2

另一个选项是相对于跨度定位的伪元素。

.title-accompagne2 {
font-family: 'DM Serif Display',serif;
display: inline-block;
text-align: left;
color: #f79089 !important;
font-size: 32px !important;
margin-left: 0px !important;
font-weight: 500;
margin-bottom: 10px;
}
.fancy {
position: relative;
}
.fancy::before {
content: "";
display: block;
width: 100%;
height: 16px;
position: absolute;
left:0;
bottom: 0;
background-color: #F8F723;
z-index: -1;
}

<div class="title-accompagne2" style="text-align: left; margin-top: 40px !important;">
<div style="color:#f79089 !important; font-size: 32px !important; margin-left: 0px !important;">
LA LETTRE
<span class="fancy" style="z-index: 6;position: relative;">GRATUITE</span>
</div>
<p style="color:#f79089 !important; font-size: 32px !important; margin-left: 0px !important;">ET
<span class="fancy" style="z-index: 6; position: relative;">MAGIQUE</span>
</p>
</div>