疑似要素before、afterの使い方

CSSを学んでいると出てくる「疑似要素」
マウスホバー時を指定する :hover や、n番目を指定するnth-childnth-of-typeなど疑似要素にも色々ありますが、今回はコンテンツを差し込む:before :afterを説明します。

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

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

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

疑似要素の作り方

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

div:before{
  content: "○○○";  
}
または
div:after{
  content: "○○○";  
}

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

たとえば疑似要素でテキストを作るとしたら、追加でfont-size、color、line-heightなど、通常のテキストと同じようにcssを設定すればちゃんと反映されます。

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

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

beforeとかafterとか言うぐらいなので、イメージ的には元となる要素の前後に作られそうに感じますが、実際はdisplay: block ・inlineに関わらず、元の要素の内側にコンテンツが作られます(元要素がブロック要素の場合)。
仮に、

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

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

崇高な文章

div{
  padding: 1.0rem;
  border: 2px solid;
}
div:before {
  display: block;
  content: "疑似要素";
  border: #555 1px dashed;
}

となります。

この入れ子になったhtml構造はpositionで位置指定したとしても変わりませんので、z-indexで重なりを指定するときは注意が必要です。
z-indexが効くとき、効かないとき

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

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

なお、before・afterを他の疑似要素とつなげることはできます

:before afterと:nth-childや:hoverなどの疑似要素を3つつなげることは出来る

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

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

と、疑似要素を3つ使って指定してやることが出来ます。

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年2月11日HTML/CSSafter,before,疑似要素

Posted by ミフネWEB