<article lang="ja">
  <h1>strong要素の意味を表すよりよい見た目を考える</h1>
  <h2>デフォルトの表示</h2>
  <p>strong 要素は<strong>重要性・深刻性・緊急性</strong>を意味します</p>

  <h2>他の表現案</h2>
  <input type="checkbox" id="checkbox"><label for="checkbox">点滅を有効にする</label>
  <p>
    strong 要素は<strong class="new">重要性・深刻性・緊急性</strong>を意味します
  </p>
</article>

strong.new {
    font-weight: bold;
    color: red;
}

strong.new:where([type="checkbox"]:checked ~ * *) {
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}