CSSの content プロパティーを使いこなそう！

content プロパティーって何？

content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTML などの文書には記述されていない要素を CSS によって新たに作り出された架空の要素です。Web クリエイターボックスでも、過去記事「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」や「経歴や会社の沿革ページに！簡単な CSS で実装するタイムライン」などで紹介した小技で利用しています。

覚えておいて欲しいのが、この content プロパティーを使って表示したテキストは選択したり、コピー＆ペーストができません。文章として扱いたい場合は、CSS を使わず、ちゃんと HTML 内に記述しましょう。

:before と ::before 違い

CSS のサンプル等で :before や :after と書かれたものと、::before、::after と書かれたものの二種類を見かけたことがあるかもしれません。これは CSS のバージョンの違いによって書き方が違います。CSS2 まではコロンひとつで記述していましたが、CSS3 になってコロンが二つになりました。現状コロン二つの使い方で問題ないと思いますが、IE8 以下の古いブラウザーには対応していないので、もし対応する必要があるならこれまで通りコロン一つにしておきましょう。

それでは content プロパティーを使った例をいくつか紹介します！デモの「HTML」「CSS」タブをクリックすると、それぞれのコードが表示されます！

テキストを表示

:before や :after 擬似要素を使って、要素の前後に任意のテキストを表示できます。書き方は簡単で、擬似要素に content: "テキストの内容"; を加えれば OK。テキストはシングルまたはダブルクオーテーションで囲むのを忘れずに！

以下の例では「new」というクラスのついたリストの後に「NEW!」というテキストを表示しています。テキストの装飾もできるので、素敵にカスタマイズしちゃってください！

ちなみにテキストを改行するには \A を記述します。元の要素に white-space: pre; を追加しないとうまく改行されないみたいです。

画像を表示

content にはテキストだけでなく、画像を指定することも可能。背景画像を指定するのと同じように、url で画像のパスを記述します。例ではリンク先やファイルタイプによってアイコンを変更しています。

カウンター

「第一章、第二章…」や「一時間目、二時間目…」など、数字＋他の単語も一緒に表示したい場合は counter-increment プロパティー と content プロパティーを一緒に使います。このプロパティーを使えば、指定した要素が登場する度に数字を 1 つずつ増やしていくことができます。また、リストタグを使わなくても実装できますが、「番号リスト」の役割を持つ ol タグを使うのが無難かと思います。

リンク先の URL を表示する

content プロパティーでは、表示する属性を指定できます。例えばリンク先の URL。ページを印刷する際、リンクテキストは印刷しても URL が表示されないので、どこにリンクされているのかがわかりません。そんな時 @media print で印刷用の CSS を用意し、content: " (" attr(href) ")"; でリンクテキストの横に URL を表示させるといいでしょう。また、以下の例ではリンク先が # や、JavaScript の場合は表示しないようにしています。

ツールチップで title 属性のテキストを表示

URL と同様に、属性を指定して表示する小技をもうひとつ。「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」で紹介したツールチップの例では、content: attr(title); で title 属性を指定して表示しています。アイデア次第でいろんな応用ができるかも？

引用文にカギ括弧をつける

blockquote 内の文章の前後に CSS で自動的にカギ括弧を加えられます。まずは blockquote 要素に quotes プロパティーで前後に利用するカギ括弧を指定。（もちろんカギ括弧以外の文字列でも OK！）そして :before と :after にそれぞれ open-quote と close-quote を指定してやれば、文章の前後にカギ括弧が表示されます。

擬似要素と content プロパティーでできることの多くは、装飾としてデザインに付け加える程度のものが多いかと思います。しかし使いこなせればなかなか便利なので、あれこれ試してみてください！