疑似要素before、afterの使い方

HTML/CSS

CSSを学んでいると出てくる「擬似要素」。その名の通り、擬似的につくる要素です。
私は呼び分けしないですが、マウスホバー時を指定する :hover や、n番目を指定するnth-childnth-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 after first-letterなどの擬似要素は「:」2つです。hover focus activeなどは1つ。別に1つでもエラーにはならないのですが、頭の片隅の置いておきましょう。

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

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

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

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


仮に、

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

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

崇高な文章

div{
  border: 2px solid;
}

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

となります。

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

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

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

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

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

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

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

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

ミフネWEB
タイトルとURLをコピーしました