如何使用两个 :before 元素编辑内容

Question

我使用一个非常复杂的CSS代码来添加一些带有：before元素的基本内容。我有两个.bold_help_text元素，我想在每个不同的div之前添加不同的内容。

我希望"仅 5.00 美元"在第一次和第二次出现时更改为不同的价格。

我不知道如何定位排名第一的div或排名第二的div。

这是我当前的代码：

.CSS：

.bold_option_checkbox span.bold_help_text:first-of-type>small:before {
content: 'ONE TIME OFFER - ONLY $5.00';
color: #cc3300;
font-weight: 700;
font-size: 13px;
font-family: 'Montserrat', sans-serif; !important; 
}

此 html 代码使用了 2 次，但文本内容不同 第一次：

.HTML：

<div class="bold_option bold_option_checkbox ">
<label>
<span class="bold_option_element"></span>
<span class="bold_option_title">Yes, I want to add my name!</span>
</label>
<span class="bold_help_text"><small>Text Content</small></span>
</div>

第二次：

<div class="bold_option bold_option_checkbox ">
<label>
<span class="bold_option_element"></span>
<span class="bold_option_title">Yes, I want Envision Leggings 50% OFF!</span>
</label>
<span class="bold_help_text"><small>Text Content</small></span>
</div>

下面是不同元素的两个示例。 第一个元素 Secound 元素

Answer 1

:first-child选择器与.bold_option_checkbox

一起使用

.bold_option_checkbox span.bold_help_text:first-of-type>small:before {
content: 'ONE TIME OFFER - ONLY $5.00';
color: #cc3300;
font-weight: 700;
font-size: 13px;
font-family: 'Montserrat', sans-serif;
}
.bold_option_checkbox:first-child span.bold_help_text:first-of-type>small:before {
content: 'ONE TIME OFFER - ONLY $10.00';
}

<div class="bold_option bold_option_checkbox ">
<label>
<span class="bold_option_element"></span>
<span class="bold_option_title">Yes, I want to add my name!</span>
</label>
<span class="bold_help_text"><small>Text Content</small></span>
</div>
<br><br><br>
<div class="bold_option bold_option_checkbox ">
<label>
<span class="bold_option_element"></span>
<span class="bold_option_title">Yes, I want Envision Leggings 50% OFF!</span>
</label>
<span class="bold_help_text"><small>Text Content</small></span>
</div>