ブログ

読んで思い出す。忘れるために書く

Q. HTML を編集せずに要素の隣に画像を表示させるには?

A. :before / :after 疑似要素, content プロパティ, url(), Base64 エンコード、この4つを使う

codepen.io

  • Base64 Image Encoder」のようなサービスを利用して 画像を文字列に変換 (プログラミング言語が扱えるなら得意な言語とライブラリを駆使して変換するのもよい)
  • CSSセレクタを利用して 画像を表示させたい位置を特定
  • :after 疑似要素を使ったスタイルの設定をする
    • contentBase64 エンコードで文字列に変換した画像を、url() で表示させたいリソースとして指定する

Link