web-dev-qa-db-ja.com

：before /：after疑似要素（content：url（image））に幅を適用できますか？

これは私の最近の質問に追加されます： 疑似要素を使用して、含まれている要素を絶対位置の要素（クリアフィックスなど）の周りにラップさせることは可能ですか？

JSFiddle： http://jsfiddle.net/derekmx271/T7A7M/

疑似要素を使用して、絶対位置にある画像を「クリアフィックス」しようとしています。スライドの後ろに同じ画像を表示することはできましたが、挿入された画像に幅を適用できないようです。私は頭がおかしいですか、それともコンテンツがコンテンツである疑似要素に幅を適用することはできません：url（img/image.jpg）？ディスプレイのさまざまなバリエーションを試しました：ブロックなど、役に立ちませんでした...

#slider ul:after {
  content: url(http://www.cs7tutorials.com/img/slide1.jpg);
  display: block;
  position:relative;
  width:70px;
}

スライドと同じサイズになるように、疑似要素画像の幅を100％に、最大幅を800pxに設定する必要があります。

cssresponsive-designpseudo-elementcss-content
12
derekmx271

頭がおかしいわけではありません。contentを使用して挿入された画像のサイズを変更することは実際には不可能です。画像は常にそのままレンダリングされます。これは、置換されたコンテンツ、または 置換された要素 として知られています（ここでは要素について説明していません）。

ただし、置き換えられた要素canは、 CSS2.1仕様のセクション1 で説明されているように、widthおよびheightを使用してサイズ変更されるため、プロパティが表示されない理由が疑問視されます。こちらからお申し込みください。これに対する答えは、プロパティが適用されるように思われますが、代わりに疑似要素ボックスに適用されます—疑似要素に背景色を与えることでこれを確認できます。疑似要素ボックス自体を置き換えるのではなく、画像は疑似要素ボックスのchildとしてレンダリングされるため、スタイルを設定することはできません（別の疑似要素が必要になるため、 tが存在します）。

そして、それは別の質問に役立ちます：なぜそれは疑似要素ボックスを完全に置き換えないのですか？残念ながら、CSS2.1はこの動作をまったく指定していないため、 合意された実装は、代わりに疑似要素ボックスの子としてコンテンツをレンダリングすることです ：

CSS2.1は、:: beforeと:: afterの「content」の処理モデルを実際には明確に定義していませんが、CSS 2.1の有益な例では、「content」がlistを指定しているという事実物事、および一貫性への欲求により、UAの動作は次のようになりました。「content」プロパティは、:: beforeまたは:: afterボックスの子になるもののリストを指定します。

-ボリス

うまくいけば、これは、書き換え作業が始まったばかりのCSS生成コンテンツレベル3でさらに対処されるでしょう。

それまでの間、:after疑似要素と生成された画像のサイズを変更できるようにする場合は、代わりに背景画像として適用する必要があります。ブラウザのサポートが問題にならない場合は、 background-sizeとwidthおよびheightを組み合わせてスケーリングします（これらのプロパティは代わりに疑似要素ボックスに適用されるという理解に基づいています）。

26
BoltClock

background-imageを使用してデモをご覧ください： http://jsfiddle.net/T7A7M/12/

0
otinanai