CSSクラスを使用して画像を挿入するポイント：前後/内容の属性

Question

最近新しいWebアプリケーションで作業を開始し、css pseudo-elementsを使用してページに画像を挿入することに気付きました。これのポイントは何ですか？単に通常のimgタグを使用しないでください。

Answer 1

こんにちはチョッパードローライオン4、

これはいくつかの可能な答えがある素晴らしい質問です。

1. その古いサイト、彼らがこれは2000年頃の人気があった古いimage replacement technique をやっていた - 人々はテキストを使用して、ALTタグで画像を使用するよりもSEM/SEOのより有益であると信じていました2010年。それは "すべての怒り"だった

2. これは、応答マークアップに役立つ可能性があります。どのような種類の画像/サイズに応じて。特定のレスポンスポイントでのみ画像が表示されることがあります。 （まだ疑似要素を使用するのではなく、画像を隠さないのはなぜだろうか）

3. 疑似要素を発見したばかりの未熟な開発者。これはあまり説明する必要はありません。

4. アプリケーションは、注入されたコアのhtmlコードにui開発者がアクセスできないように書かれている可能性があります。 これが最も可能性が高い原因と思われます。そして私は最も頻繁に出会いました。

状況： UI開発者は、何かが起こるようにする必要があります。しかし、彼らは実際のコーディングに触れることを禁じられています。

例： 「親愛なるUI開発者、これは正または負のコメントであるかどうかに応じて、スマイリーの顔やfrowny顔を挿入してください。」

<custom-directive data-grade="bad">{{Our Data is Great and You Stink}}<custom-directive> 
<custom-directive data-grade="good">{{Your Data can Enjoy New Life}}<custom-directive> 

これはあなたが与えられたとあなたがスマイリー/ frowny顔を挿入することができために何のインテリアの要素が存在しないすべてのであれば、あなたは何をしますか？

私の場合は、おそらく、その時点でCSS疑似要素を使用する必要があります。

は答えることを例としてこれを参照してください： http://codepen.io/Acts7/pen/MJRrwa

または「星の評価システム」については、この気の利いたソリューション https://codepen.io/Acts7/pen/BpEJRg

希望これは、あなたの質問に答えます。