CSS でコーディングしている時、タグやクラスなどのセレクタの後に『::before』『::after』が付いてスタイルが書かれている時があります。

これは一体何なのでしょうか?

今回は、CSS の擬似要素である、::before、::after を紹介します。

基本のコードは、以下になります。

<div class="container">
  <p class="text">今日の天気は<span>晴れ</span></p>
</div>
p {
  font-size: 36px;
}

.container {
  position: relative;
  width: 640px;
  height: 180px;
  background-color: linen;
  border: 2px solid #333;
}

.text {
  padding: 0 24px;
}

image2

::before とは

::before は、指定するセレクタの前に、擬似要素を追加します。

CSS に『セレクタ名::before』と書いて、{}の中に、内容やスタイルを指定します。。

例えば、『晴れ』の前に、『曇りのち』を追加する場合は、

span::before {
  content: "曇りのち";
  color: blue;
}

とします。

ブラウザで確認すると、

image3

『晴れ』の前に HTML には記述がない、『曇りのち』が表示されました。

::after とは

::after は、指定するセレクタの後に、擬似要素を追加します。

CSS に『セレクタ名::after』と書いて、{}の中に、内容やスタイルを指定します。。

例えば、『晴れ』の後に、『ところにより雨』を追加する場合は、

span::after {
  content: "ところにより雨";
  color: red;
}

とします。

ブラウザで確認すると、

image4

『晴れ』の後に HTML には記述がない、『ところにより雨』が表示されました。

また、『ところにより雨』が枠からはみ出さずに、折り返されております。

Chrome で擬似要素を確認すると、

image5

HTML に文章が存在せず、::before と::after が追加されております。

つまり、『曇りのち』と『ところにより雨』は、ブラウザから見ると文章として成り立っていますが、HTML から見ると文章として存在しないことになっています。

::before、::after の使い方

::before、::after の使い方として、デザインを重ねる方法があります。

例えば、親要素のデザインを少しずらした擬似要素を作ってみます。

.container {
  position: relative;
  width: 640px;
  height: 180px;
  background-color: linen;
  border: 2px solid #333;
}

.container::before {
  content: "";
  position: absolute;
  width: 640px;
  height: 180px;
  background-color: mintcream;
  border: 1px solid #666;
  top: 8px;
  left: 8px;
  z-index: -1;
}

.container::after {
  content: "";
  position: absolute;
  width: 640px;
  height: 180px;
  border: 1px solid #333;
  top: 16px;
  left: 16px;
  z-index: -2;
}

ブラウザで確認すると、

image6

擬似要素である枠線がずれて表示されました。

注意していただきたいのが、content: "";は必ず設定するようにしてください。

例えば、.container::aftercontent:"";を外すと、

image7

::after の枠線がなくなりました。

これは、content: "";を入れることにより、空欄のコンテンツがありますよということになります。

擬似要素が表示されない場合、まずはcontent: "";を疑ってみてください。

重ねてデザインを制作したい場合、よく使いますので、ぜひ試してみてください。

ブログ一覧