疑似要素before、afterの使い方

CSSを学んでいると出てくる「擬似要素」。その名の通り、擬似的につくる要素です。
私は雑なので呼び分けしないですが、マウスホバー時を指定する :hover や、n番目を指定するnth-child ・nth-of-type、以外を表す:notなどは正確には擬似クラスと呼ぶそうです。

というわけで、今回はコンテンツを差し込む::before ::afterを説明します。

htmlコードに書かれていない要素を作り出す::before ::after

擬似要素のbefore afterは、htmlコードに書かれていない要素をcss側で作ってしまえる要素です。

位置指定なしの場合、「before」は親要素の中の先頭に、「after」は最後尾に作られますが、多くの場合、疑似要素にpositionプロパティをあてて位置を指定しますので、必ずしも「前だからbeforeを、後ろだからafterを使わないといけない」わけではありません。

疑似要素の作り方

まず基本の指定方法を書いておきます。< div > に擬似要素をつくるとして

div::before{
  content: "○○○";  
}

または

div::after{
  content: "○○○";  
}

最低限これだけあれば大丈夫です。
○○○にはテキストや画像URL、attr()など、作成したいコンテンツ内容を記入します。空欄でも可。
content は必須なので、これがないと擬似要素は表示されません。

たとえば::before でテキストを作ったとして、font-size、color、line-heightなどもcssを設定すればちゃんと反映されます。

ちなみに、::before ::afterの擬似要素にdisplayプロパティを指定しない場合、インライン要素として振る舞います。

擬似要素は元の要素のコンテンツ内に作られる

beforeとかafterとか言うぐらいなので、イメージ的には親要素より前（後ろ）に作られそうに感じますが、実際はdisplayプロパティに関係なく親要素の内側にコンテンツが作られます（親要素がブロック要素の場合）。

仮に、

<div> 
  <p>崇高な文章</p> 
</div>

のdivに擬似要素::beforeを位置指定なしで差し込むとどうなるかと言うと、

div{
  border: solid;
}

div::before {
  content: "疑似要素";
  border:  dashed;
}

となります。

この親子関係（擬似要素は必ず子要素となる）のhtml構造はpositionで位置指定したとしても変わりませんので、意識しておかないとz-indexを指定するときに混乱する原因となります。（z-indexが効くとき、効かないとき）

::before::beforeや、 :before::afterのように複数つなげることは残念ながら出来ませんが、どうしてもやりたい場合、親になる要素を二重、三重にしてそれぞれに擬似要素を指定すれば作ることは可能です。

ただし可読性が悪くなりますので、複数人で管理する場合や後からメンテナンスするときに罵られることになります。
それなら素直にhtmlに記述した方が良いし速いですね。

なお、before・afterを他の疑似クラスとつなげることはできます。

::before afterと:nth-childや:hoverなどの疑似クラスを複数つなげることは出来る

たとえば、「２番目にあるliタグ(:nth-child(2) )がマウスホバー（:hover）のとき、後ろ(::after)にアイコンを表示したい」
なんてときは、

li:nth-child(2):hover::after{
  content: "\xxxx" ;
  font-family:"Font Awesome 5 Free";
  font-weight: 600;
}

と、３つ使って指定してやることが出来ます。