水平線まで何ピクセル？

水平線や見出しにCSSのbefore擬似要素で装飾を施した。

---

水平線

beforeを使うのは初めてだったのでhr要素を文字で入れ替えるを参考にさせてもらった。hail2uさんの書くCSSの記事は示唆に富んでて毎回好き。content要素に指定するべきUnicodeは、Macなら文字ビューアから参照できる。文字を右クリックするとクリップボードに情報をコピーすることができて、Unicode表現が示されている。例えばU+2A18の場合は、U+の部分を\に置き換えて content:"\2a18" のように指定する。Unicodeのかっこいい記号を調べたいときは、jugyoさんのYounicodeを見るのが便利。横スクロールでサクサク流せるUIがすごく良い。

見出し

見出しにもbeforeで適当な装飾を付けた。beforeの本来の使い方のような気がする。ついでにスター部分の画像の高さが揃っていないので揃えた。上が適用前で下が適用後。2pxほどの違いしかないけど個人的には結構気になった。