CSSの擬似要素「:before」「:after」の使い方

Testing a print stylesheet By: Jeremy Keith

CSSはHTMLで作られた要素の構造を装飾するためのものです。

しかしCSSの擬似要素「:before」「:after」は、CSS側からHTMLに要素を追加することが出来ます。

そのため、見出しやボックスエフェクトなどに利用するとHTMLの構造が複雑にならずに何度も使いまわせるというメリットがあります。

このCSSの擬似要素「:before」「:after」の基本的な使い方を今回は紹介します。

擬似要素「:before」 / 「:after」
  1. 「:before」「:after」の使い方
  2. 「:before」「:after」の応用

「:before」「:after」の使い方

「:before」は要素の先頭に「:after」は後方に擬似要素を作り出します。

擬似要素は通常の<div>や<p>などのタグと同じようにCSSのプロパティを当てることができます。

after_before

例えば、以下の様にCSSを定義し「<p class=”sample”> Sample </p>」に当てた場合、どのように表示されるか見てみます。

CSS
.sample:before{
    content: ":before";   // 前方に文字列:beforeを挿入
    font-size: 150%;      // フォントサイズを150%にする
    color: #4ECDC4;       // 文字色を緑色にする
    font-weight: bold;    // 太文字にする
}

.sample:after{
    content: ":after";    // 後方に文字列:afterを挿入
    font-size: 150%;      // フォントサイズを150%にする
    color: #FF6B6B;       // 文字色を緑色にする
    font-weight: bold;    // 太文字にする
}

「<p class=”sample”> Sample </p>」 ⇒  Sample

擬似要素には「content: “”;」というプロパティが指定でき、ここで入力された内容がそのまま画面に表示されます。

content: "表示したい文字列";

これで基本的な使い方は以上です。

「:before」「:after」の応用

CSS3が実装されてから良く見るこのような、影つきのボックスも「:before」「:after」で作ることが出来ます。

1.<div>にafter,beforeを定義します。文字の表示は行わないため「content:」には””(空文字)を指定します。

CSS
div.shadow
{
    position: relative;
    border:1px solid #666;
    background: #fff;
    width: 200px;
    height:100px;
}

div.shadow:before, div.shadow:after
{
    content: "";
    position: absolute;     // 絶対位置指定
    width: 30%;                 // 横幅指定
    height:10px;                // 縦幅指定
    bottom: 15px;              // 下側から15pxの位置に表示
    border: 1px solid #000;
    z-index: 1;                  // ※後で変更する

}

div.shadow:before
{
    left: 5px;      // 左側に表示
}

div.shadow:after
{
    right: 5px;     // 右側に表示
}

注意点としては、<div>に「position: relative;」をbefore, afterに「position: absolute;」を設定することです。

これにより、before, afterは<div>からの絶対位置を指定できるようになります。

position:「static」「absolute」「relative」「fixed」の使い方

この時点では、この様に<div>内の左右に一定幅の要素を作成します。

※上のCSSの定義では、左右の要素を見せるために「z-index:1」を指定していますが、実際には不要なため後で変更します。

2.after,beforeに傾きと影を付けます。

CSS
div.shadow:before
{
    left: 5px;      // 左側に表示
    box-shadow: 0 15px 10px #444;  // 影を付ける
    // 傾きを付ける
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

div.shadow:after
{
    right: 5px;     // 右側に表示
    box-shadow: 0 15px 10px #444;  // 影を付ける
    // 傾きを付ける
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
}

3.最後にz-indexを変更します。

CSS
div.shadow
{
    position: relative;
    border:1px solid #666;
    background: #fff;
    width: 200px;
    height:100px;
}

div.shadow:before, div.shadow:after
{
    content: "";
    position: absolute;     // 絶対位置指定
    width: 30%;                 // 横幅指定
    height:10px;                // 縦幅指定
    bottom: 15px;              // 下側から15pxの位置に表示
    border: 1px solid #000;
    z-index: -1;                  // ※-1でdivの後ろに回す

}

div.shadow:before
{
    left: 5px;      // 左側に表示
    box-shadow: 0 15px 10px #444;  // 影を付ける
    // 傾きを付ける
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

div.shadow:after
{
    right: 5px;     // 右側に表示
    box-shadow: 0 15px 10px #444;  // 影を付ける
    // 傾きを付ける
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
}

z-indexに-1を指定することで、before, afterを後ろに回して完成です。

このほかにも、いくつか影つきのボックスを作成してみました。

このほかにも、ボックスエフェクトと同じ考え方でbefore, afterを応用するとこのような見出しも作成できます。

Sample

サンプルをいくつか作成してみましてので確認してみてください。

divider

Trackback URL

http://webnonotes.com/css/css-before-after/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>