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を非表示にする
+セレクタと~セレクタで解決します。かんたん。