レンちゃんとペンタ

【CSS擬似要素】::beforeと::afterの使い方とサンプル

【CSS擬似要素】::beforeと::afterの使い方とサンプル

CSSの::beforeと::afterに関して、用法と利用事例のサンプルをご紹介。

    Webデザインとブログで豊かに引きこもる。

    レンちゃんとペンタ

    Webデザインは器。ブログは中身。
    「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
    おウチで豊かに楽しく暮らす方法をご紹介しています。

    ::beforeと::afterって何？

    ::beforeと::afterは、疑似要素

    両方ともCSSの「疑似要素」の仲間です。
    英語では「pseudo elements」と定義されていて、「pseudo」には「偽物の / よく似た / 疑似の」といった意味があります。

    何ができる？

    ネーミングの通り、HTML上にない要素を擬似的に作成する事ができます。
    言葉だけではわかりにくいハナシなので、早速コードを見ていきます。

    基本の使い方

    ::beforeや::afterを使うと、既存のベース要素の前後に、何かしらの要素を足すことができます。
    ::beforeを使った場合はベース要素の手前、::afterの場合は後にそれぞれ追加されます。

    ::before要素

    サンプル
    以下は、ベースであるp要素に::beforeで要素「★」を追加した例です。

    ・セレクタは「ベースの要素::before」のように定義します。
    ・追加したい内容をcontentプロパティで設定します。

    p::before{
  content: "★";
}
    <p>レンちゃんとペンタ</p>

    レンちゃんとペンタ

    ::after要素

    こちらも考え方は同じです。

    サンプル
    以下は、ベースであるp要素に::afterで要素「★」を追加した例です。

    p::after{
  content: "★";
}
    <p>レンちゃんとペンタ</p>

    レンちゃんとペンタ

    ::before & :after要素

    ::beforeと::afterを合わせて使うこともできます。

    サンプル
    以下は、ベースであるp要素の前後に、::beforeと::after要素で「★」を追加した例です。

    p::before, p::after{
  content: "★";
}
    <p>レンちゃんとペンタ</p>

    レンちゃんとペンタ

    画像を使うこともできます

    contentプロパティには、画像を指定することもできます。
    設定方法はbackground-imageと同様です。

    サンプル
    ::beforeを使って、要素の前に画像を挿入した例です。

    p::before{
  content: url(画像のパス);
}
    <p>レンちゃんとペンタ</p>

    レンちゃんとペンタ

    画像の表示サイズを調整したい場合

    画像の用法についてもう一つ。
    ::before、::afterでは、画像の表示サイズを設定することができません。
    retina対応などの事情で大きい画像を用意すると、そのままのサイズで表示されてしまいます。
    また、svg画像を使った場合も期待通りのサイズになってくれません。

    レンちゃんとペンタ

    そんな時は、こんな方法を使います。

    ・contentを空にして利用する
    ・width / heightプロパティで、画像の表示エリアを作る
    ・背景として画像を表示させる

    p::before{
  /* contentは空に */
  content: "";

  /* 表示させたい画像サイズの幅と高さを設定 */
  width: 16px;
  height: 16px;

  /* widthとheightが機能するようにinline-blockに変更(::beforeはインライン要素のため) */
  display: inline-block;

  /* 画像を背景として表示 */
  background-image: url(画像のパス);
  background-size: contain;
}

    レンちゃんとペンタ

    Webフォントも使えます

    GoogleのマテリアルアイコンやFont AwesomeといったWebフォントも使えます。

    サンプル
    Googleのマテリアルアイコンのうち、Celebration（クラッカー）を表示させた例です。

    p::before{
  font-family: 'Material Icons';
  content: "\ea65";
}
    <p>レンちゃんとペンタ</p>

    レンちゃんとペンタ

    コロン(:)の数について

    疑似要素に関して、コロンが1つのものと2つのものを見た事があるかもしれません。

    :before
    ::before

    CSS2まではコロンの数が1つだったのですが、CSS3からはコロン2つの表記が採用されました。
    理由としては、擬似クラスと擬似要素が区別しやすいように、という事です。

    CSS3では疑似クラスと擬似要素を見分けやすくするために、::beforeの表記法（二重コロン付き）が導入されました。ブラウザーではCSS2で導入された:beforeも使用できます。
    参考：Mozilla公式サイト

    何の役に立つの？

    私が初めて::beforeと::after要素に出会った時に真っ先に思ったのがコレ。
    「何のために作ったの？」
    です。

    この疑問は未だ解消されていませんが、一般的には構造とデザインの分離のために用いられている事が多いです。

    ・HTML：構造に関する内容を担当
    ・CSS：デザインに関する内容を担当

    先ほど紹介したサンプルの「★」も、HTMLに直接書いてしまう方がラクなのですが、この「★」は装飾を目的とした要素なので、CSS側に書いた方がよいのでは、と考えることができます。

    使い方と使いドコロがわかったところで、以下、私がよく使う表現方法をまとめてみました。

    活用事例

    矢印

    「詳しくはこちら」「次のページへ」など、リンク先に矢印や三角形をつけたい時に大活躍。

    p::before{
  content: "▶︎";
}
    <p>レンちゃんとペンタ</p>

    レンちゃんとペンタ

    リンク先のアイコン

    属性セレクタと組み合わせて、リンク先の内容を表現するのにも便利です。
    こちらはGoogleマテリアルアイコンを使った例です。

    /* リンク先がMP3データの場合 */
a[href$=".mp3"]::before{
  font-family: 'Material Icons';
  content: "\e3a1";
}

/* リンク先がMP4データの場合 */
a[href$=".mp4"]::before{
  font-family: 'Material Icons';
  content: "\e02c";
}
    <p><a href="dummy.mp3">MP3のダウンロード</a></p>
<p><a href="dummy.mp4">MP4のダウンロード</a></p>

    MP3のダウンロード

    MP4のダウンロード

    セリフ・引用

    positionを使うと、表示位置も自在に調整できます。
    以下は、引用符を実装した例です。
    positionを使って、ベースのp要素から少し離れた位置に画像を配置しています。
    2つの引用符のうちの一つは、transformプロパティで回転させて表現しているので、用意する画像は一個だけでOKです。

    /* before、after共通の設定 */
.sampleBracket p::before, .sampleBracket p::after{
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background-size: contain;
  background: url(画像のパス);

  /* 相対指定ができるよう、relativeを設定 */
  position: relative;
}

/* beforeの設定 */
.sampleBracket p::before{
  top: -16px;
  left: -8px;
}

/* afterの設定 */
.sampleBracket p::after{
  /* 一個の画像で済ませるため、180度回転して利用 */
  transform: rotate(180deg);
  bottom: -16px;
  right: -8px;
}
    <p>芸は身を助ける</p>

    芸は身を助ける

    フロー

    何かの工程や手順を表現する時の矢印にも便利です。
    こちらもpositionを利用しています。

    li{
  position: relative;
  border: 1px solid #4978C9;
  background: #E9FBFD;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 40px;
}

li:not(:last-child){
  margin-bottom: 40px;
}

li:not(:last-child)::before{
  content: "▼";
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -35px;
}

    HTMLもスッキリしています。

    <ul>
  <li>ホップ</li>
  <li>ステップ</li>
  <li>ジャンプ</li>
</ul>
    • ホップ
    • ステップ
    • ジャンプ

    吹き出し

    ・contentプロパティは空でもOK
    ・borderプロパティを利用すると三角形を描画することができる

    こうした特性を利用してよく作られているのが、吹き出しです。

    レンちゃんとペンタ

    /* 吹き出しの本体 */
li{
  position: relative;
  border: 1px solid #3D487D;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 40px;
}

/* 吹き出しの三角形部分 */
li:not(:last-child)::before{
  content: "▼";
  position: absolute;
  left: 50%;
  bottom: -35px;
}
    <ul>
  <li>HTMLを書く</li>
  <li>HTMLファイルを保存する</li>
  <li>ブラウザを更新する</li>
</ul>

    まとめ

    ::beforeと::after要素に関してご紹介しました。

    • ::beforeと::afterは、擬似要素
    • ベース要素の手前に要素を追加できるのが::before
    • ベース要素の後ろに要素を追加できるのが::after
    • CSS3からはコロン2つで定義
    • 構造とデザインを分離したい時に役立つ

    装飾に関する要素を::beforeと::after要素に任せると、HTMLが構造に特化されてクリーンになるので、ソースコードを見ていて気持ちいいんですよね。

    1. Home
    2. 【CSS擬似要素】::beforeと::afterの使い方とサンプル

    Related Posts