Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

: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つを使用するかどうかというのは考える必要がありそうですが、覚えておきたいところです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした