before/after 擬似要素とは?

before/after擬似要素とは、選択したタグ要素の前後に装飾用の要素を付け加えるものです。

一番簡単な例として、例えば以下のようなHTML要素があったとして、

<p>いろはにほへと ちりぬるを</p>

CSSでbeforeとafterに、contentを付け加えます。

p::before,
p::after {
  content: "!!!";
}

すると、結果がこのようになります。

!!!いろはにほへと ちりぬるを!!!

文章が!!!で挟まれました。
このように、指定したcontentを要素の前後に加えるのが、before/after擬似要素の本来の使い方です。

装飾に使う

ただ、これだけだと何も面白くありません。
before/after擬似要素が真価を発揮するのは、それが装飾用に使われた時です!

before/afterは普通のHTML要素として扱えるため、幅や高さなどを指定することが可能です。

また、positionをabsoluteにしてしまえば位置の調整も自由自在なので、驚くほど柔軟な装飾が可能になります。

例えば、以下のようにdivを定義し、

<div class="face"></div>

そこにCSSのスタイルをあてます。

.face {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: -webkit-linear-gradient(top, #ffcc66, transparent);
  position: relative;
}
.face::before, .face::after {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #804000;
  position: absolute;
  top: 50px;
}
.face::before {
  left: 50px;
}
.face::after {
  right: 50px;
}

結果はこんな感じ。

pic20140206-1

顔っぽいものを作りました。
目の部分がbefore/after要素です。
装飾に使うときのコツとして、

  • 対象要素はrelative、before/afterはabsolute
  • contentには必ず “” を指定する

などに気を付けると、うまくいくと思います。

応用技

before/afterを取り入れた、お洒落な表現を取り上げます。
ブラウザはchromeを想定しています。

重なる紙

pic20140206-3

<div class="kasane"></div>
.kasane {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: #00ffff;
  position: relative;
}
.kasane::before, .kasane::after {
  content: "";
  width: 100%;
  height: 100%;
  box-shadow: 0 0 10px #999;
  position: absolute;
  z-index: -1;
}
.kasane::before {
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  background: #ffff00;
}
.kasane::after {
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
  background: #ff00ff;
}

折り紙を重ねたような表現。
before/afterのz-indexをマイナスにし、それぞれを10度ずつ傾けて配置。

box-shadowを付けると綺麗に見えてグッド。

めくれた紙

pic20140206-2

<div class="mekure"></div>
.mekure {
  margin: 50px;
  width: 300px;
  height: 200px;
  background: white;
  position: relative;
}
.mekure::before, .mekure::after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  width: 50%;
  top: 80%;
  background: #777;
  box-shadow: 0 15px 10px #777;
}
.mekure::before {
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
  left: 5px;
}
.mekure::after {
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
  right: 5px;
}

紙の両端がめくれたような表現。
before/after要素の影だけを、端からはみ出させるのがポイント。

bottomの値をマイナスにしてみると、どういう原理で実現されてるかが良く分かる。

まとめ

アイデア次第でさまざまな表現が可能なので、皆さんも色々と試して見て下さい。

CATEGORIES