疑似要素（::beforeと::after）って使いこなせていますか？
疑似要素はそれぞれの要素についてる『ボーナス』みたいな物です。疑似要素を上手に使いこなすことで、コーダーとして、１つステージが上がります。
それでは、疑似要素で一体何が出来るのか紹介していきましょう。
この記事を読み終わる頃には、疑似要素に対して『可能性しか感じなくなっているはず』です。

CSSの疑似要素（::beforeと::after）の基本的な使い方

疑似要素の::beforeと::afterですが、基本的な使い方は以下のような使い方です。

See the Pen 疑似要素（before,after）の基本的な使い方 by Uilou (@uilou754) on CodePen.

疑似要素はタグ内のコンテンツの前後に【要素っぽいデザイン】を追加できる仕組みです。
それぞれ、beforeがコンテンツの前、afterがコンテンツの後ろにcontentの中に入れた物が追加されます。
上記例では、名前の後に「様」や郵便番号の前に「〒」を入れるのに使用しています。

これだけだと、ふーんですが、このbeforeとafterには無限の可能性があるんです。

CSSの疑似要素（::beforeと::after）で見出しやボタンをおしゃれにデザインしてみる

疑似要素の::beforeと::afterに出来ることは文字を入れるだけに留まりません。
疑似要素をブロック要素にして色を付ければ、かなり自由度の高い装飾を行うことが可能です。
今まで画像として貼り付けていたデザインがCSSで出来てしまうのです。
これはSEOの観点からも重要です。

以下のサンプルは見出しを疑似要素を使って装飾した例です。

See the Pen 疑似要素で画像に装飾WebDesign3.0風 by Uilou (@uilou754) on CodePen.

これらのサンプルは行っていることは単純です。

• 疑似要素をブロック要素にする
• 疑似要素をposition: absolute;で自由に動かせるようにする
• 疑似要素をtop, left, right, bottomで位置を調整する
• 疑似要素をtransformで位置の微調整や回転などを行う
• 後は疑似要素のwidth,heightでサイズを調整し、borderやbackgroundで色を付けるだけ

これだけのことで、１つのタグに２つのブロック要素がついてくると思うと、これは間違いなく『ボーナス』です！

ただし、imgタグやinputタグ等の終了タグを持たないタグは疑似要素 （::beforeと::after） を使えない

pタグやh1タグのように、開始タグと終了タグをそれぞれ持っている場合には疑似要素を使えるが、imgタグやinputタグのように終了タグを持たない場合には、内部の要素がないため、疑似要素を使うことができない。

なぜなら疑似要素はタグ内のコンテンツの前後に付ける物なので、タグでコンテンツを挟み込めない場合、疑似要素自体が存在しないから・・・だと思ってる！

CSSの疑似要素（::beforeと::after）でリストをデザインできる

さて、ここまでで疑似要素のcontentに文字を入れると、文字がコンテンツの前後に追加されること、そして、ブロック要素化してabsoluteで移動させることで、模様や記号としても使えることがわかりましたが、リストの装飾も疑似要素で行うことが出来ます。

See the Pen Untitled by Uilou (@uilou754) on CodePen.

ulの元々の点をlist-style-type: none;で消してしまいます。
そして、消えた所にbefore要素で新しい点を作って表示してあげるという仕組みです。

CSSの疑似要素（::beforeと::after）でチェックボックスやラジオボタンもデザインできる

チェックボックスやラジオボタンは通常ブラウザごとの既定のデザインが使用されますが、これについても疑似要素で装飾することが可能です。

装飾することで、ブラウザごとの表示の違いを吸収し、ホームページのデザインを踏襲した物に変えることが出来ます。

See the Pen チェックボックスやラジオボタンを装飾する by Uilou (@uilou754) on CodePen.

チェックボックスやラジオボタンの場合、元の要素はdisplay noneで完全に非表示にしてしまい、Label要素のbeforeで枠を、afterでチェックや塗りの装飾を行います。

ポイントはinput:checkedの時に、スタイルを設定するのではなく、チェックされていない時でもスタイルを設定しておき、それをあえてopacityなどで見えないようにしておき、input:checkedになった時に、opacityを1に変えます。

そうすることで、切り替えのタイミングでtransitionなどを使って、フワッと切り替えることが可能になります。

CSSの疑似要素（::beforeと::after）でカスタムデータ属性も使える

疑似要素の::beforeと::afterでは、カスタムデータ属性を呼び出すこともできます。

See the Pen カスタムデータ属性の利用 by Uilou (@uilou754) on CodePen.

タグのプロパティにdata-○○=”○○”と入力することで、疑似要素のcontentから呼び出すことができます。

CSSの疑似要素（::beforeと::after）は可能性の坩堝

このように、疑似要素はアイデア次第で様々な応用方法が考えられます。