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

Question

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

我希望将“仅$ 5.00”在第一次和第二次更改为不同的价格。

我不知道如何定位第一格或第二格。

这是我当前的代码：

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>

这里是两个不同元素的例子。 First element Secound element

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>