カラクリサイクル

『輝かしい青春』なんて失かった人の雑記

Unicode AAをCSSのcontent要素に埋め込む方法

概要: このブログでhr要素をUnicode AAに置換しているやり方


現時点で使ってるコード

hr {
    border : none ;
}

hr:after {
    display : block ;
    margin  : 1em 0 ;
    content: '(\FF65\E34\3C9\FF65\E34)\309D' ;
    text-align : center ;

    color : #4E9A06 ;
}

このコードのポイント

  • contentプロパティでUnicodeを埋め込む際は、CSSの文字コード表記を使う
  • CSSの文字コード表記は16進数で指定するっぽい
  • なので、10進数の値を指定すると意図した通りにならない

使うと便利

上記サイトの使い方としては、

  1. Unicode AAをHTMLの16進数表記に変換
  2. 次にHTMLの16進数表記をCSS用に変換する
  3. 例: あ\3042
  4. contentプロパティに変換した文字列を貼付ける
  5. (゚Д゚)ウマー