GoogleCSSの「::before疑似要素」、「::after擬似要素」は様々な場面で使える便利な機能です。スタイルシートを記述している途中で「疑似要素が思ったように反映されない!」という状況にもしばしば遭遇すると思います。今日はそんなときに確認するべきチェックポイントを紹介します。目次contentプロパティを指定しているか?positionプロパティは正しく指定されているか?それは疑似要素が使える要素か?疑似要素の指定が重複していないか?前後の重なり順の指定は間違っていないか?インライン用そのままになっていないか?contentプロパティを指定しているか?疑似要素が表示されない理由で、最も多いのはcontentプロパティの設定を忘れているケースだと思います。以下のようなコードはNGです。{background-color:#333;}contentプロパティを忘れずに指定しましょう。{content:"";background-color:#333;}positionプロパティは正しく指定されているか?擬似要素に「position:absolute;」を指定したい場合は、その親要素に「position:relative;」を効かせる必要があります。空要素には使うことができません。空要素(void要素)とは?終了タグが存在せず、開始タグのみで記述される要素のこと。br、hr、img、input、sourceなどがそれにあたります。疑似要素の指定が重複していないか?疑似要素は1つの要素に対して「::before」、「::after」のそれぞれ1個ずつ、計2個しか指定できません。{content:"たちつてと";}CSSは前のコードが後ろに書いたコードで上書きされるので、上記の例では「かきくけこ」と「たちつてと」の2つが出力されることになります。前後の重なり順の指定は間違っていないか?前後の重なり順を指定するz-indexプロパティは正しく指定されていますか?z-indexを効かせるには「positionの値がstatic以外」でないといけません。{position:relative;z-index:99;}インライン用そのままになっていないか?例えば、擬似要素にtransformを効かせたい場合。疑似要素はデフォルトではインライン要素(display:inline;)として扱われていますが、これを「inline」以外の他の値にする必要があります。疑似要素をtransformで動かしたい場合はdisplayの値をinline以外にしましょう。