疑似要素で出来るあれこれ

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。

疑似要素の:beforeや:afterは「すごい」のヒトコトに尽きます。ページ上のいかなる要素においても、他のHTML要素で出来ることは何でも出来てしまうようなすごいモノを追加で2つもゲットすることが出来てしまいます。しかもセマンティック的に悪影響を及ぼすことなく、様々なデザインの可能性を拡げてくれます。今回は総集編です。それでは早速ご紹介していきましょうか。

複数の背景キャンバスの実現

相対配置した親要素に疑似要素を絶対配置できっちりと貼り付けることが可能なので、色々と遊べる2枚のエクストラレイヤーが追加されたと考えてよいでしょう。ニコラス・ギャラガーさんが別の記事で、複数のボーダーラインや、CSS3での複数背景シミュレーションや、同じ高さの列など詳しくご紹介なさっています。

単一要素で作成可能な図形例

上記の画像内にあるアイコンは全て単一要素から作成することが可能で、しかも非常に実用的です。それとは対照的に「CSSでコーヒーカップを描いてください！」などと言われたら、それは面白そうですが1700個以上のdivタグが必要となってしまうので全く実用的ではありません。他にもいろいろな形があります。
六芒星のサンプルをご覧ください：

#star-six {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
        position: relative;
}
#star-six:after {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
        position: absolute;
        content: "";
        top: 30px;
        left: -50px;
}

印刷用ページでのURL表示

CSSサンプル

@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
}

フロートの解除

フロートを解除するために、セマンティック的によろしくない余計なタグをコンテナ要素に追加するよりも、疑似要素を使用して解除することが出来ます。一般的に「clearfix」として知られる手法ですが、もう少しセマンティック的に表現するとクラス名は「group」です。

.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

float: center;　のシミュレーション

いくらみんなで望んでみても、floatプロパティーには実際はセンタリング用の値はありません。けれどfloatには右寄せと左寄せはあるので、疑似要素をプレースホルダーとして使用し2つの列の真ん中を削って画像を配置することが出来ます。

ラベルブロックに使用言語の表示

@media print {
    a[href]:after {
        content: "("attr(href) ") ";
    }
}

今このサイトでは疑似要素を使って、使用している言語名をラベルとして表示させています。

<pre rel="CSS"></pre>

pre:after {
  content: attr(rel);
  position: absolute;
  top: 22px;
  right: 12px;
}

アイコンセットの作成

ニコラス・ギャラガーさんがまたすごいことをしています。上記の画像内にあるアイコンは全て画像を一切使用せず疑似要素だけで作られています。

限りあるスペースの有効活用

CSSが与えてくれたり奪ったりすること。何が言いたいかと言うと、疑似要素のコンテンツはメディアクエリーによって、条件的に適用されたり無効化されたりします。例えば上記の画像例で言えば、スペース幅に応じてアイコンを使用したり、もっと充分にスペースがあるならば単語や文字を追加して表示させたりすることが可能です。

タイポグラフィーな飾り書きを追加

もし疑似要素がテキストだったなら、親要素のタイポグラフィースタイルを継承します。けれどもしコンテンツを設定しているなら、その部分は好きなようにスタイル設定することが出来ます。例えば別のフォントや色などの飾り書きを使ってヘッダーを目立たせることも出来ます。

h2 {
     text-align: center;
}
h2:before, h2:after {
    font-family: "Some cool font with glyphs", serif;
    content: "\00d7";  /* Some fancy character */
    color: #c83f3f;
}
h2:before {
    margin-right: 10px;
}
h2:after {
    margin-left: 10px;
}

フルブラウザ幅のバー作成

もしコンテンツはそのままのサイズで、背景だけブラウザのサイズに応じて幅を変更させたいような場合、セマンティック的にもよろしくないようなラッピングタグを追加してみたり、すっちゃかめっちゃかなスペース設定をしてみたりと試してみて煮詰まってしまったことはございませんか？これもまた疑似要素をうまく使用することにより簡単に解決します。1つの要素でコンテンツ幅を制限し、ヘッダーバーの方は疑似要素でフルサイズまで拡張するようシミュレートさせることが出来ます。

ボディ枠線の作成

通常の枠線を左右に使用し、position:fixedで固定された疑似要素で上下の設定をします。すると何もマークアップすることなく、ボディ枠線効果を実現させることが出来ます。

body:before, body:after {
    content: "";
    position: fixed;
    background: #900;
    left: 0;
    right: 0;
    height: 10px;
}
body:before {
    top: 0;
}
body:after {
    bottom: 0;
}
body {
    border-left: 10px solid #900;
    border-right: 10px solid #900;
}

きらりと光るボタンの作成

まず透明→白→透明のグラデーションになっている画像を疑似要素ブロックに入れて、ボタンの外側に配置します（overflow: hiddenで隠してあります）。次にhover時にボタンの上を通過させるようにします。こうすればマウスを乗せた時に、きらりと光って見えるボタンを作ることが出来ます。今のところ疑似要素のトランジッションに対応しているのはFirefoxの4か5のみなので、Firefoxの4か5で試してみてください。

特定リンクのロールオーバー時はページ全体をフェイドアウト

もし親要素が相対配置されていなかった場合、絶対配置されている疑似要素は、その更に1つ外側の相対配置されている親要素を元に配置が決まります。もし相対配置されている要素が無ければ、大元のルート要素に関連付けられます。これをうまく利用して、フルブラウザ・ウィンドウ要素を作ることが出来ます。メイン要素の下に配置し、マウスが乗せられた時に「ページフェイドアウト」効果をリンクに適用させます。

ヘッダーに3D効果なリボン設定

リボンを嫌いな人はいないと思います！このページにHTMLとCSSの詳細が載っています（http://css-tricks.com/snippets/css/ribbon/）。これは少しz-indexを負の値で使用している為、不透明な背景が設定された親要素の下に隠れてしまわないように、ラッピング用に内側に追加でタグを記述する必要がある場合があります。

olリストの番号にスタイル設定

順序付きリスト（olリスト）の番号部分に、スタイル設定を試みたことがありますか？色々試してspanを使ってラッピング用にタグを追加したり、リストアイテムをスタイル設定したり、はたまたspanでそのスタイル設定を無効化してみたりしてもうにっちもさっちもいかなくなってしまったりとか・・・。それか背景画像をとんでもない方法で使ってみたり、リストスタイルを無効化させて独自の番号を入れてみたりとか・・・。どれもこれもしょうもない方法ですよね。疑似要素をカウンターとして使う方が断然ベターです。

データテーブルのレスポンシブ化

大きなデータテーブルは小さなスクリーンで見るにはやっかいですよね。大き過ぎて垂直方向にも水平方向にもスクロールしなければならなかったり、全体を表示させるために縮小されていて今度は小さ過ぎて全く読めなかったりとか。CSSのメディアクエリーと疑似要素を組み合わせれば小さなスクリーンに合わせて読み易くなるように、データテーブルをレスポンシブ化＆再フォーマットすることが出来ます。

ツールチップのスタイル設定

HTML5のデータ属性を利用して、その属性を疑似要素としてスタイリングします。こうすればCSSだけで簡単にツールチップが作成出来るのです！

<a href="#" data-tooltip="This is a badass tooltip.">Vestibulum</a>

  a {
    position: relative;
    text-decoration: none;
  }
  a:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 20%;
    background: #ffcb66;
    padding: 5px 15px;
    color: black;
    -webkit-border-radius: 10px;
    -moz-border-radius   : 10px;
    border-radius        : 10px;
    white-space: nowrap;
    opacity: 0;
     /* At time of this creation, only Fx4 doing pseduo transitions */
    -webkit-transition: all 0.4s ease;
    -moz-transition   : all 0.4s ease;
  }
  a:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 20px solid #ffcb66;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    /* At time of this creation, only Fx4 doing pseduo transitions */
    -webkit-transition: all 0.4s ease;
    -moz-transition   : all 0.4s ease;
    opacity: 0;
    left: 30%;
    bottom: 90%;
  }
  a:hover:after {
    bottom: 100%;
  }
  a:hover:before {
    bottom: 70%;
  }
  a:hover:after, a:hover:before {
    opacity: 1;
  }