::before・::afterで疑似要素を追加しよう

このレッスンでは、::beforeと::afterを使った疑似要素の追加方法を学び、HTMLを増やさずに装飾を加えられるようになることを目標にします。「CSS before after 使い方」で調べている方向けです。

::beforeと::afterは、HTMLを増やさずに、CSSだけで要素の前後に飾りの内容を追加できる疑似要素です。contentプロパティで表示する内容を指定します。ラベルやアイコン的な飾りを付けたいときに便利です。

サンプルコードでは、.badge::beforeで星マークを文章の前に、.quote::afterで引用終わりを示すテキストを文章の後ろに追加しています。HTML側にはこれらの飾り文字は一切書かれていない点に注目してみましょう。

初心者がよくつまずくのが、contentプロパティを書き忘れることです。contentがないと、疑似要素自体は存在するものの何も表示されません。空の疑似要素を作りたい場合でもcontent: "";のように空文字を明示的に指定する必要があります。

文章自体はシンプルなままに保ちつつ、見た目の装飾だけをCSS側にまとめて管理できるのが利点です。星マークや引用の飾り線など、デザインの細部を作り込むときによく活用されるテクニックです。