hr要素を文字で入れ替える

HTML5になってhr要素はセクション内での区切りに使うものなどと役割が割りとはっきりと決められました。今までもそんな感じで使ってた人が多いですけど。ただhr要素のCSSによる装飾はなかなか難しいところがあります。そこを擬似要素を利用してゴニョゴニョすることにより、あまり罫線々々してない区切りを作って頑張ろうとかそういうお話です。 Demo: Swap HR Element with Character(s) 単純に元のスタイルを消して背景を透明にし、そこに擬似要素を重ねてやるという最近良く使われるテクニックです。 hr { margin: 2em auto; border: none; position: relative; clear: both; width: 100%; height: 48px; background-color: transparent; box-sizing:

[d4-1977]

hrの使いどころあるの？と思っていたけれど、あるんですね

[hukuchosan]

contentプロパティの値は普通に日本語や絵文字系を書くと、CSSファイルの文字コードに気を使わなければならないので、なるべくならコードで直接指定したほうが良いでしょう。文字のコードを調べるには、Windowsなら文字コ

[nanto_vi]

半角スペースが消えるというのはwhite-space: pre;を使ったほうが……と思ったけど、エスケープシーケンスに飲み込まれる問題もあるか。

[kkeisuke]

:before