CSS擬似要素 before, afterの解説

CSSの擬似要素である、beforeとafterについて解説します。 それぞれ指定した場所の前後に文字や画像を入れることができ、どちらも使い方は下記の通りです。
要素名:before {
  プロパティ: 値;
}

要素名:after {
  プロパティ: 値;
}
 

before

<p>例文</p>
p:before {
      content: "ここに文字をいれる" ;
}
 

after

<p>例文</p>
p:after {
      content: url("img/test.png");
}
これでp要素の前に文字を、後ろに画像をつけることができます。 contentプロパティは文字や画像、URLを指定することができますが、contentで指定したものは選択したりコピー&ペーストをすることはできません。 そのため、文章として扱う場合はHTML内に直接記述する必要があります。  

clearfixについて

clearfixとはclearプロパティを使わずにfloatを解除する手段です。 始めてclearfixが使われたのは2004年ですが、現在では当時に比べより簡潔な記述でclearfixを使うことができるようになっています。 HTMLにクラスclearfixを指定してafterを使うことによって全てのclearfixにまとめてfloatを解除させることができます。
.clearfix:after {
    content: "";
    clear: both;
    display: block;
}
さらに、afterを使いあらかじめfloatする要素の親要素になる要素に対してclearfixを設定しておくことができます。
div:after,
ul:after {
    content: "";
    display: block;
    clear: both;
}
例えばこのようにdivとulにあらかじめ設定しておくことで記述がスマートになる、clearfixの入れ忘れの防止などのメリットがあります。  

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です