今回は「疑似要素」とは何かについてご紹介します。疑似要素とは疑似要素には、::before、::afterなどがあり、要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加するのに使われます。疑似クラスとの違いは、要素全体の特定の状態を指定するだけでなく、要素の特定の部分のスタイルを指定することができます。「p:first-letter{}」と記述すると、p要素の最初の文字だけにスタイルが指定されます。CSS3からは、疑似要素を記述する場合は「::before」のように、コロン(:)を2つ使用します。これは疑似クラスと疑似要素の区別を明確にするためです。70%;}上記のように記述することで、「SAMPLE」というテキストのあとに「NEW!」という赤い文字を追加することができます。メニューバーなど全く同じ記述のHTMLが複数ある場合に、CSSに記述するだけで全てのHTMLを修正することが可能になるので、わざわざ1つ1つ書き換える必要がなくなります。疑似要素の一覧と使い方::after・・・要素の直後にスタイルを適用::before・・・要素の直前にスタイルを適用::first-letter・・・要素の最初の文字にスタイルを適用::first-line・・・要素の最初の行にスタイルを適用まとめ疑似要素も、疑似クラス同様とても便利なセレクタです。「::before」や「::after」が使いこなせるようになると、いろいろなデザインや表現ができ、画像を使わずにCSSのみでWebサイトを作れるようにもなります。「::before」や「::after」は、IE8以前でサポートされていないため、使用する際には覚えておきましょう。MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。