CSS辞典 contentプロパティ解説

要素や疑似要素の内側に挿入するものを決定する「contentプロパティ」の使用方法を記載

CSS3／2.1

対応ブラウザ
- 概要・使用方法
- 指定できる値（コンテンツ）
サンプルコード
- 実行結果

対応ブラウザ

初期値	normal
適用される要素	すべての要素、疑似要素及びページマージンボックス（印刷余白）
モジュール	CSS Generated Content Module Level 3
継承	あり

概要・使用方法

{ content:コンテンツ;}

「contentプロパティ」は、要素や疑似要素の内側に挿入するものを決定します。contentプロパティが要素に対して指定された場合、要素を通常通り描画するか、画像や要素に結び付けられている何らかの代替テキストで置換するかを決定します。疑似要素やページのマージンボックスに指定した場合、まったく描画しない、画像で置換する、任意のテキストや画像で置換するかのいずれかを決定します。

CSS2.1におけるcontentプロパティは、::before、::after疑似要素に対して何を挿入するかだけの単純なプロパティでしたが、CSS3では再定義されたcontentプロパティは要素の置き換えにも対応し、かなり複雑なプロパティとなりました。

値の指定は、normal、noneは単体で１つだけ指定可能です。

指定できる値（コンテンツ）

none	要素に対して指定された場合、要素の内容を描画しません。疑似要素に対して指定された場合は、疑似要素の作成を行いません。つまり、指定された要素、疑似要素は表示されません。
normal	要素またはページマージンボックス（印刷余白）に対してしてされた場合、「contents」値として算出されます。::before、::after疑似要素に対して指定された場合は、「none」として算出されます。 ::maker疑似要素に対して指定された場合は、「normal」として算出されます。
文字列	任意の文字列がそのまま挿入されます。引用符（”）で囲んで記述します。
url()	関数型の値です。カッコ内に指定したURLの挿入します。画像型の値としてlinear-gradient()関数なども使用可能です。
counter()	関数型の値です。カッコ内に「カウンター名」を指定して、要素に連番を付けます。counter-incrementプロパティと併記して使います。
attr()	関数型の値です。カッコ内に指定した属性名の値が挿入されます。
open-quote	quotesプロパティで指定された開始記号が挿入されます。
close-quote	quotesプロパティで指定された終了記号が挿入されます。
no-open-quote	quotesプロパティの記号の階層を1段階下げます。
no-close-quote	quotesプロパティの記号の階層を1段階上げます。

サンプルコード

アンカーリンクの前後に文字列を挿入する例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>contentプロパティ サンプル</title>
    <meta charset="uft-8">
    <style> 
         .more-af::after{
             content: "▶";
         }
         .more-bf::before{
             content: "▶";
         }    
    </style>
  </head>
  <body>
         <p><a class="more-af" href="https://www.google.co.jp/">次のページに進みます</a></p>
         <p><a class="more-bf" href="https://www.google.co.jp/">次のページに進みます</a></p>
  </body>
</html>