web-dev-qa-db-ja.com

疑似要素が表示されていない後のCSSコンテンツを含むDiv

完了する必要のあるPOCがあり、CSSを使用して製品のスタイルを更新することのみが許可されています。 CSSコンテンツ属性を使用して、製品の画像の1つをロゴに置き換えました。

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

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

.demo:after {
  content: 'test';
  display: inline-block;
}
<div class="demo"></div>

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

ここのJSFiddle： https://jsfiddle.net/qykbjznm/

csspseudo-elementcss-content
10
ICodeGorilla

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>
13
Jamy

CSSから背景を置き換えて、HTMLに画像として配置することができます。

.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つの異なる結果があります。

4
Albzi

一部のブラウザは、実際の要素にcontentプロパティを適用しますが、 CSS2ではサポートされていません 。 css-content-3はこれを可能にすることが期待されていますが、レベル3仕様が標準になるまで、これは現実的には今後数年間は発生しません（特に、過去に発生していないことを考えると14年）、実際の要素にcontentを適用することは、非標準的な動作と見なす必要があります。

contentプロパティの値が画像の場合、 その画像は置換されたコンテンツとして挿入されます 。また、これを実際の要素に適用すると、要素に::beforeおよび::after疑似要素が含まれなくなります。これが、::after疑似要素が表示されない理由です。

前述のように、必要なのは、要素自体ではなく、要素の::before疑似要素に画像を適用することだけです。

2
BoltClock

私はあなたの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>
0
Joel Giovinazzo