CSS更改

Question

我有以下html结构（我无法更改，由JS生成）：

<ul>
<li>
  <a>
    <span class="current-info">Step X: </span>
    <span class="number">1.</span>
    <span class="booking-icon">Date</span>
  </a>
</li>
<li>
  <a>
    <span class="current-info">Step X: </span>
    <span class="number">2.</span>
    <span class="calendar-icon">Date</span>
  </a>
</li>
...

默认情况下，类“number”具有以下css：

#bds-bf.wizard > .steps > ul > li.current > .number:after{
content: '\f2b4';
font-family: FontAwesome;
}

类“数字”重复多次，因此我无法根据它更改内容。 我想要做的是改变

的价值

#bds-bf.wizard > .steps > ul > li.current > .number:after

基于兄弟班级，例如，如果它在下一个兄弟中找到 .booking-icon 类，它应该包含以下内容：

content: "\f0f9'

如何在不使用Javascript的情况下使用css选择器实现此目的？

更新：JSFiddle示例：https://jsfiddle.net/s4wje415/