content CSS プロパティとは
トピック：::beforeおよび::after擬似要素と組み合わせて使用され、要素内にコンテンツを生成する 事ができる
プロパティ Content
実例 コード 1
サンプル コードを試すa::after {
content: " (" attr(href) ")";
}
情報：- CSS の
contentプロパティは::before擬似要素と::after擬似要素と共に使用され、要素のコンテンツを生成するために使用される contentプロパティを使用して挿入されたオブジェクトは、匿名 置換要素
プロパティ 定義と使用法
| デフォルト値・初期値 : | normal |
|---|
| 適用対象 : | ::before / ::after 疑似要素 |
|---|
| 継承 : | 不可 |
|---|
| メディア : | すべて |
|---|
| 計算値 : | 通常要素で使われると常に normal::before 及び ::after では: normal の指定があれば計算値は none指定がなければ、- URI 値は、絶対的 URI となる
attr() 値は、計算値の文字列となる- その他のキーワードについては指定どおり
|
|---|
CSS Version | CSS2 |
|---|
| アニメーションの種類 : | 個別 |
|---|
| JavaScript 構文 | JavaScriptを使用して要素に擬似クラスを与えることはできませんが、同じ結果を得るための他の方法があります。 |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | content: normal |none |counter |attr |string |open-quote |close-quote |no-open-quote |no-close-quote |url |initial |inherit; |
|---|
プロパティ値
| 値 | 説明 |
normal | これは:before,:after擬似要素と擬似要素についてはnoneに計算されます。これはデフォルト値です。 |
none | 擬似要素が生成されない |
counter | この値は、contentカウンタとして設定する 詳細は、counter-resetand counter-incrementプロパティを参照 。 |
| 文字列 | 指定された文字列（テキストの内容）を挿入する |
url(url) | 値はurl()、外部リソース（イメージなど）を指定する リソースまたはイメージを表示できない場合は、無視されるか、またはプレースホルダが表示される |
attr(attribute) | この関数は、選択した要素の前後に指定した属性の値を挿入する セレクタのサブジェクトに指定された属性がない場合、空の文字列が挿入される 注： 属性名は引用符で囲まない。 |
open-quote | 開始引用符を挿入するこの 値はquotesプロパティからの適切な文字列に置き換えられます。 |
close-quote | 終了引用符を挿入するこの 値はquotesプロパティからの適切な文字列に置き換えられます。 |
no-open-quote | 開始引用符は表示しませんが、引用符の入れ子のレベルを増分（減少）する |
no-close-quote | 閉じ引用符を表示しませんが、引用符の入れ子のレベルを増分（減分）する |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| content | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯1 | フルサポート◯12 | フルサポート◯1 | フルサポート◯8 | フルサポート◯4 | フルサポート◯1 |
|---|
attr() | フルサポート◯2 | フルサポート◯12 | フルサポート◯1 | フルサポート◯8 | フルサポート◯9 | フルサポート◯3.1 |
|---|
url() | フルサポート◯1 | 不明 | フルサポート◯1 | フルサポート◯8 | フルサポート◯7 | フルサポート◯1 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| content | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯1 | フルサポート◯あり | フルサポート◯あり | フルサポート◯4 | フルサポート◯9.5 | フルサポート◯1 | フルサポート◯あり |
|---|
attr() | フルサポート◯2.1 | 不明 | フルサポート◯あり | フルサポート◯4 | フルサポート◯10 | フルサポート◯3.1 | 不明 |
|---|
url() | 不明 | 不明 | 不明 | 不明 | 不明 | 不明 | 不明 |
|---|
CSS content | CSS プロパティ 値| 意味 使い方 実例 – WebRef