疑似要素::beforeや::afterにcontentで特殊文字や画像を表示する

リンクテキストに疑似要素::beforeや::afterで、□や画像を表示するには。

画像はurlを指定する

contentに直接urlが書ける。“”は要らない点が要注意。

::before {content:url(images/hoge.png);}

contentで画像を表示する場合、block要素にしてwidth、heightを指定して、背景画像を置く方法がある。その場合はcontent:"";という風に、contentを空にする。

urlを直接書く場合との使い分けは、画像サイズをcssで調整する必要があるかどうか？

ただし、urlを直接書く場合も、transformを使って画像サイズを拡大・縮小させて調整することは可能。


{
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}

リストの前に#9633;を表示する場合などに使える方法。content:"#9633;";に直接記号を書き入れてしまっていることがあるが、文字化けしないように、コードを使いたい。

::before {content:"\025a0";}
::after {content:"\025b6";}

ポイントは、特殊文字のコードは16進数のコードを使うこと。知らずに10進法のコードを書いては表示されずに首をかしげてた。

16進法のコードはUnicodeで定義されたコード位置を「&#x」と「;」で囲むとのこと。で、そのコードをcontentで使う場合は、\0のあとにコード位置を書く。