Edited at

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