CSSでFizzBuzz問題
どうしてwebデザイナーに・・・CSSが書けないのか?(またはCSSでFizzBuzz問題) - mon_sat at Co-Edo(半年前の自分への教科書 / 別院)
とりあえず解いてはみましたが……Google先生に頼らない方向でいってみようと思ったはいいけど酷いですね.
#main { list-style-type: none; } #main li:nth-child(3n), #main li:nth-child(5n), #main li:nth-child(15n) { text-indent: -9999px; position: relative; } #main li:nth-child(3n):after, #main li:nth-child(5n):after, #main li:nth-child(15n):after { display: block; text-indent: 0px; position: absolute; top: 0; } #main li:nth-child(3n):after { content: "Fizz"; } #main li:nth-child(5n):after { content: "Buzz"; } #main li:nth-child(15n):after { content: "FizzBuzz"; }
【解答集できました】どうしてwebデザイナーに・・・CSSが書けないのか?(またはCSSでFizzBuzz問題) - mon_sat at Co-Edo(半年前の自分への教科書 / 別院)
やっぱりまだミジンコほどの知識しかないなぁとひしひし感じました.
上のもマーカー問題解決するならdisplay:list-itemしちゃえばいいのか.
あとtext-indent使うより圧倒的にvisibility: hiddenのほうがかっこいいですね!