擬似要素「before」「after」の例

「:before」で前に「オレ的には」を挿入

昨日は暑い夜だった。

そして熱い夜でもあった。そう。一晩中ドラクエ5に没頭していたからだ。

なんと!

ついに「はぐれメタル」が仲間になったのだ。

「:after」で後ろに「……と言ってみる」を挿入

昨日は暑い夜だった。

そして熱い夜でもあった。そう。一晩中ドラクエ5に没頭していたからだ。

なんと!

ついに「はぐれメタル」が仲間になったのだ。

  文字に装飾もできる

わかりやすいように赤字にして大文字にもしてみました。割と色々できます。

昨日は暑い夜だった。

そして熱い夜でもあった。そう。一晩中ドラクエ5に没頭していたからだ。

なんと!

ついに「はぐれメタル」が仲間になったのだ。

  Hタグへ挿入

<h3>の前に「【1】」が挿入されました。

ドラクエへの愛情について

  画像を前後に入れる

この画像は「before」で入れているのでドラッグできません。

「before」で画像を指定すると、1つの欠点があります。それは大きさを変更できないこと。

ただ、これに対応する方法としては、メディアクエリを使う方法があります。

上の画像はスマホで見ると「別に作ってある小さいサイズの画像」が表示されるように指定されています(下のような感じ)。

@media screen and (max-width: 480px) {
.gazou:before { content:url(images/gazou-small.png) ; }
}

  矢印を挿入

  1. 材料を仕入れる
  2. 商品を作成する
  3. 配送する

矢印を左揃えにしたい場合は適宜「text-align : left ;」で変更してください。

TOPページに戻る