CSS

2017/04/30

before疑似要素、after疑似要素はとっても便利ですが、直感で使うと思わぬ結果になりますので復習しておきます。 CSSで三角 でもbefore、afterを使用しています。これは直感に沿った使用例です

HTML。

<p class="pseudo">ここが段落</p>

CSS

.pseudo::before{
  content:"●";
}
.pseudo::after{
  content:"<";
}

ここが段落

のように表示されますCSS3では疑似様相は::とするようです。これでP要素の前後にbefore、afterが追加されたのですが見た目的に

before<p class="pseudo">ここが段落</p>after

に思ってしまうとアウトです。よくある解説サイトの日本語だけ見ると『要素の前後』とあるもんですから要素の外側にbefore、afterがつくイメージ持ってしまいそうです。

pseudo2クラスでpaddingと背景色を設定してみます。

HTML

<p class="pseudo2">ここが段落</p>

CSS

.pseudo2{
  padding:10px;
  background-color:#0ff;
}
.pseudo2::before{
  content:"●";
}
.pseudo2::after{
  content:"<";
}

ここが段落

のようにbefore、afterは見事にP要素の内側なんですね。

<p class="pseudo2">
  ::before
  ここが段落
  ::after
</p>

のようなのが実態なんですね。この辺りは別に当然といえば当然です。

私の直感に合わないパターンはDIVなどのブロックに対するafter疑似要素なのです。

HTML

<div class="pseudo3">
ここがdiv
</div>

CSS

.pseudo3{
  border:solid 1px #f60;
  width:100px;
  height:100px;
}
.pseudo3::before{
  content:"●";
}
.pseudo3::after{
  content:"<";
}

これが勿論正解なんですが、DIVにwidthとheightがあるのでafter疑似要素は幅と高さの終焉の手前にあるような、あってほしいような気がします。

のように右下にafterが来るような気がしてならないですがここではDIVの内容は『ここがDIV』という文字列だけでafterは内容の直後に付加されるんだなということです。ご理解している方にとっては当たり前のことなんでしょうが、ついついafterでclearfixを掛けて引き続きmargin-bottomで下余白を取ろうとしてしまうのですが内容が終了したところからafterが始まるのでmargin-bottomが効かなくて 😕 😕 困ってしまいます。