LoginSignup
107

More than 5 years have passed since last update.

css脱初心者? :before :after擬似要素の使い方とか基本的なこと

Last updated at Posted at 2015-03-16

:before :after 擬似要素とは

使う前.html
 <ul>
   <li>リストです</li>
 </ul>

:before:afterを使うと

使ったら.html
<!-- イメージです -->
 <ul>
   <li>
     <span>(:before)</span>
     リストです
     <span>(:after)</span>
   </li>
 </ul>

このようなhtmlがあるというイメージでcssを書くことが出来るため、デザインの幅がとても広がります。
あくまで「擬似要素」であるため、実際に上記のようなhtmlが出力されるわけではありません。

無駄なhtmlが出力されないので、htmlを汚さずにセマンティック?な感じでいけるのもメリットですね。ちなみに:before,:after要素はインライン要素です。

使い方

(サンプルは:beforeですが、:afterも同様です)

cssで指定することにより使うことが出来ます。

style.css

li:before {
  content: "";
}

基本的にはこれだけで使うことが出来ます。

下のはcontent:""を指定したリストの画像です。

スクリーンショット 2015-03-16 15.48.10.png
(liの中に:beforeという要素があります。ですが、何も表示されていません)

content使ったら.htmlで言えば<span>(:before)</span>の中身を指定します。
content:""と書いているので中身はなし、つまり<span> </span>。中身がない空のインライン要素があるイメージです。なので何も表示されないのが当然ですね。

そのためcontent:""だけで使うことはなく、色々組み合わせて使うことになります。

例えばこんなの(「く」の逆のがbefore要素です)
スクリーンショット 2015-03-16 15.34.29.png

style.css
    li { position:relative; }

    li:before {
      content: "";
      display: block;
      position: absolute;
      top: 8px;
      left: -16px;
      width: 6px;
      height: 6px;
      border-right: 1px solid #555;
      border-bottom: 1px solid #555;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

これだけ並んでいると、「content:""なくてもいけるんじゃね?」と思ってしまいそうですが、contentは必須です。忘れないで記述しましょう。

逆に言えば、

style.css

li:before {
  content: "";

  /* その他の装飾........   */
}

という構造ですので、ふつうのcssが書ければ、簡単に使うことができますね。

擬似要素はインラインなので高さや横幅を指定したいときはdisplay:"block"が必要になるところにご注意ください。

意図したものがうまく表示されない時は、contentを指定していない、displayを指定していないなどを疑ってみるといいかもしれません。

一例

contentは擬似要素の中身を指定します。
そのため文字列をいれれば、その文字列が表示されます。便利。

style.css
    li { position: relative; }

    li:before{
      content: '☓☓☓'; /* 自由! */
      display: block;
      position: absolute;
      top:0;
      left: -40px;
    }

スクリーンショット 2015-03-16 16.01.53.png

あとは色々なサンプルを見たり遊んだりで、引き出しを増やしていきましょう。

サンプル

画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10
まだまだある!疑似要素と疑似クラスでできること

余談

擬似要素の他に擬似クラスというものがあります。
:beforeや:afterは擬似要素。
aタグなどでよくつかうa:hoverやinput:focusなどが擬似クラスになります。
混同しがちですが、ちゃんと区別して使用したいものです。

css3では、擬似要素と擬似クラスをはっきり区別するために、記述方法が少し変わりました。

style.css

    /* 擬似要素はコロンが2つ!(::before) */
    li::before{
      content: '';
      /* いろいろ */
    }

   /* 擬似クラスはコロンが1つ(:hover) */
    a:hover {
      /* いろいろ */
    }

css3ということで対応ブラウザの問題もあるようで、コロン2つを使用するかどうかというのは考える必要がありそうですが、覚えておきたいところです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
107