HTML&CSS

【CSS】擬似要素::before、::afterとは何ですか？

作成日：2021年07月01日

更新日：2021年07月01日

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

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

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

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

html
<div class="container">
  <p class="text">今日の天気は<span>晴れ</span></p>
</div>

css
p {
  font-size: 36px;
}

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

.text {
  padding: 0 24px;
}

::before とは

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

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

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

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

とします。

ブラウザで確認すると、

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

::after とは

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

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

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

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

とします。

ブラウザで確認すると、

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

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

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

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

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

::before、::after の使い方

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

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

css
.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;
}