巷で流行っているというズンドコキヨシ(ズンドコチェック)をやってみました
普通にやっては面白くないのでCSSメインで挑戦

コード

zundoko.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ずんどこ</title>
  <style>
    #list {
      width: 300px;
      list-style: none;
      line-height: 25px;
      margin: 50px auto;
    }
    .zun:before {
      content: 'ズン';
    }
    .doko:before {
      content: 'ドコ';
    }
    .zun+.zun+.zun+.zun+.doko+ *:before {
      font-size: 25px;
      content: 'キ・ヨ・シ' !important;
    }
    .zun+.zun+.zun+.zun+.doko+ *:after {
      font-size: 25px;
      content: '！' !important;
    }
    #list > *:nth-last-child(-n+6):before {
      font-weight: bold;
    }
    #list > *:nth-last-child(-n+6):after {
      content: '♪';
    };
  </style>
</head>
<body>
  <ul id="list" />
  <script>
    const css = ['zun', 'doko'];
    do {
      const li = document.createElement('li');
      const wk = parseInt(Math.random()*100 % 2);
      li.classList.add(css[wk]);
      list.appendChild(li);
    } while (!document.querySelector('.zun+.zun+.zun+.zun+.doko+*'));
  </script>
</body>
</html>

動くやつはこちらhttps://codepen.io/taqm/pen/yMEjRv

疑似要素とCSS3のセレクタでなんとか実現できました。
絞めの部分はいろいろと装飾するようにする徹底ぶりです。

まとめ

いい感じでした！
そのうちアニメーションもつけたい