CSSでズンドコキヨシしたかった #CSS

CSSだけじゃできなかった！
最初だけjs使いました。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
    <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script>
        $(function(){
            var target = $('.js-zundocoBox li');
            function zundoco(){
                    for (var i = 0; i <target.length; i++){
                        var num = Math.round(Math.random());
                        if (num == 0) {
                            target.eq(i).attr('class','zun').empty().append('ズン');
                        } else {
                            target.eq(i).attr('class','doco').empty().append('ドコ');
                        };
                    };
            };
            zundoco();
            $('#retry').on('click',function(){
                zundoco();
            });
        });
    </script>
    <style>
    /*必須箇所*/
        .js-zundocoBox li:last-child::after{
            content: 'キヨシできなかったよ……';
        }
        .zun + .zun + .zun + .zun + .doco::after{
            content: 'キ・ヨ・シ！';
        }
        .zun + .zun + .zun + .zun + .doco ~ li{
            display: none;
        }
    </style>
</head>
<body>
    <article class="wrap" id="id">
        <h1>ズンドコ</h1>
        <ul class="js-zundocoBox">
            <li></li>
            <li></li>
            <li></li>//これを100個くらい
        </ul>
        <div id="retry">やりなおし</div>
    </article>
</body>
</html>

サンプル

解説

js部

liに.zunもしくは.docoをランダムで割り振る、ついでにliの中にズンもしくはドコも入れる
（別になくてもよかったけどせっかくなので）やりなおしボタンでズンドコを入れ直す

css部

.js-zundocoBox li:last-child::after
liを全部使ってもキ・ヨ・シ！できなかった場合に失敗したことを表示させる
.zun + .zun + .zun + .zun + .doco::after
隣接セレクタでズンドコ判定してキ・ヨ・シ！を表示させる
.zun + .zun + .zun + .zun + .doco ~ li
ズンドコ判定が出た後のliを非表示にする

+セレクタと~セレクタで解決します。かんたん。