擬似要素が表示されていない場合のCSSコンテンツのDiv

Question

私は完了しなければならないPOCを持っており、CSSを使用して製品のスタイルを更新することのみが許可されています。私は、CSSコンテンツ属性を使用して、製品のイメージの1つをロゴに置き換えました。

このロゴの後に表示される電話番号の簡単な文字列を追加する必要があります。私はこれを行うには:after疑似要素を使用しようとしました。これは、divのコンテンツが空の場合（ロゴが削除されている場合）にのみ機能します。

.demo { 
 
    content: url('http://placehold.it/350x150') 
 
} 
 

 
.demo:after { 
 
    content: 'test'; 
 
    display: inline-block; 
 
}

<div class="demo"></div>

私は両方のルールのためheightとwidthコーディングdisplayinline-blockにハードを変更しようとしています。本質的に私が見つけることができるすべて。どんな助けでも大歓迎です。ここ

JSFiddle：あなたはCSSから背景を交換し、HTMLで画像としてそれを置くことができhttps://jsfiddle.net/qykbjznm/

Answer 1

contentプロパティは、要素内のすべてのコンテンツを置き換えます。非擬似セレクタにcontentを追加すると、その内容は::beforeと::after擬似セレクタに置き換わります。

したがって、::beforeと::after疑似セレクタ内のcontentプロパティを使用してこれを試してください。

.demo:before { 
 
    content: url('http://placehold.it/350x150') 
 
} 
 

 
.demo:after { 
 
    content: 'some text'; 
 
    display: block; 
 
}

<div class="demo"></div>

Answer 2

：

.demo::after { 
 
    content: 'test'; 
 
    display: inline-block; 
 
}

<div class="demo"> 
 
    <img src='http://placehold.it/350x150'/> 
 
</div>

、あるいはこれを行う：

.demo { 
 
    background: url('http://placehold.it/350x150'); 
 
    height:150px; 
 
    width:350px; 
 
} 
 

 
.demo::after { 
 
    content: 'test'; 
 
}

<div class="demo"></div>

2つの異なる結果があります。

Answer 3

私はあなたのJSFiddleで少し周り混乱していると私は、現在のdiv以下の電話番号の表示を行う唯一の現実的な方法は、別のdivを作成することであることが判明：

<div class="demo"></div> 
<div class="demo2"></div> 
<style> 
    .demo { 
    content: url('http://placehold.it/350x150'); 
    height:150px; 
    width:350px; 
    } 

    .demo2:before { 
    content: "test"; 
    } 
</style> 

Answer 4

ブラウザの中には、not being supported in CSS2にもかかわらず、実際の要素にcontentプロパティが適用されるものがあります。 css-content-3はこれを可能にすることが期待されていますが、レベル3の仕様が標準になるまで、現実的にはもう何年も起こらないでしょう（特に年に起こらなかったことを考慮して）、content実際の要素には非標準的な振る舞いとみなされるべきである。

contentプロパティの値が画像の場合、that image is inserted as replaced contentです。これを実際の要素に適用すると、要素が::beforeと::afterの疑似要素を持つことができなくなります。これがあなたの::after疑似要素が表示されない理由です。

前述のとおり、要素自体ではなく、要素の::before疑似要素に画像を適用するだけで済みます。