バツマークを表示する処理の実装方法

Question

前提・実現したいこと

ボタンをクリックしたら、question_numberの数字の上にバツ画像を被せる形で表示する処理を適用させたいと考えています。
実装に関しましては、CSSとJavaScriptのどちらでも良いと考えています。
具体的にはこちらのサイトのような、問題に正解したら丸マークが徐々に小さくなるのと同様な形で、表示させたいと考えています。

該当のソースコード

  <div class="main_content">
    <p>
      <span class="question_number">(1)</span>
      <span class="question_text">2 + 1 = </span>
      <input type="text"  class="answer_box">
    </p>
    <p>
      <span class="question_number">(2)</span>
      <span class="question_text">3 + 1 = </span>
      <input type="text"  class="answer_box">
    </p>
    <button id="checkButton">
    採点
    </button>
  </div>
  

body{
  background-color: #E5E2DE;
}
.main_content{
  margin:0 auto;
  margin-top:3%;
}
.question_number{
  color:#959492;
  margin-right:5%;
  margin-bottom:1%;
}
p:first-child .question_text{
  vertical-align:middle;
}

.question_text{
  font-size:3rem;
}

window.addEventListener('DOMContentLoaded', () => {
  document.getElementById('checkButton').addEventListener('click',function(){
    
  });
});

試したこと

CSSでのサンプルの調査を行なってみたのですが、いまいち該当するものが見当たりませんでした。
CSSサンプル1
CSSサンプル2

何か良いサンプルなどありましたら、教えて頂けましたら幸いです。

Answer 1

SVGで画像を用意しておいて被せればよいと思います