Как добавить цвет во вложенную букву

Question

Как добавить черный цвет для всех амперсандов. Я пытался span::first-letter, но это не относится. Я в основном пытаюсь вложить их в scss.

<div class="all-cakes">
  <p class="cake">
    <span class = "chocolate"> Chocolate </span>
    <span class = "nuts"> & nuts </span> 
    <span class = "raisins"> & raisins</span>
  </p>
</div>

СКС:

$cakeColor: gold;
$chocolate: brown;
$nut: goldenRod;
$raisins: darkGoldenRod;



.all-cakes{

  margin-left: 200px;
  margin-top: 100px;

  .cake {

    & > span{
      font-size: 40px;

      span::first-letter{
        color: black;
      }

      &:nth-child(1){
        color: $chocolate;
      }


      &:nth-child(2){
       color: $nut;
      }


      &:nth-child(3){
       color: $raisins;
      }
    }
  }
}

Answer 1

::first-letter не работает со встроенными элементами . Поэтому мы должны использовать display:inline-block; или display:block; для span или использовать p или любой другой элемент уровня блока вместо span. Но даже если мы используем первую букву в элементах уровня блока, кажется, что он исключает несловарные символы, такие как @!=&% и так далее. Но это не согласуется во всех браузерах.

Так что я бы сгенерировал амперсанды с :before{content:"&";color:black;}.

$cakeColor: gold;
$chocolate: brown;
$nut: goldenRod;
$raisins: darkGoldenRod;



.all-cakes{

  margin-left: 200px;
  margin-top: 100px;

  .cake {

    & > span{
      font-size: 40px;

      &:nth-child(1){
        color: $chocolate;
      }


      &:nth-child(2){
       color: $nut;
      }

      &:nth-child(2):before {
         content: "&";
         color: black;
      }
      &:nth-child(3){
       color: $raisins;
      }
      &:nth-child(3):before {
         content: "&";
         color: black;
      }
    }
  }
}

Answer 2

Это работает (проверено)

 span {

      font-size: 40px;

      &:first-letter {
         color: black;
      }
}