web-dev-qa-db-ja.com

CSS：<img>に擬似要素が表示されない

カーソルを合わせるとメニューからスライドアップするような画像です。メニューの下に隠れているので、画像の下部に暗いフェードを追加して、画像に少しぼかしを入れます。これを実現する最良の方法は、疑似要素を使用することだと考えました。 IEサポートは細かいので、あまり気にしません。

だから、ここに私が持っているものがあります：

.header-section .trygg-ehandel-icon {
    position: absolute;
    top: 45px;
    right: 280px;
    z-index: 0;
    display: block;
    // Stripped out some transition style here
  }

  // Here's where the cool stuff begins!
  .header-section .trygg-ehandel-icon::after {
    position: absolute;
    top: 0px; left: 0px;
    height: 20px; width: 20px;
    display: block;
    content: '.';
    z-index: -999999px;
    background: red;
  }

まず、「後」の前にダブルコロンを使用するかシングルコロンを使用するか不明です。私はいつも1つを使用してきましたが、最近、2つを使用している人に気づきました。どうすればよいですか？どちらもうまくいくようです！

あなたはここでそれを実際に見ることができます： http://goo.gl/RupQa

ヘッダーメニューの上に表示される黄色のロゴです。画像の上に20x20の赤いボックスが表示されないのはなぜですか？親 （.trygg-ehandel-icon）は絶対配置なので、疑似要素はそれに対して相対的に表示されるはずですよね？

私はこれを1時間以上修正しようとしていますが、何か提案はありますか？

csspseudo-element
22
qwerty

回答どおり この質問では 。

beforeおよびafter擬似エレメントをimgタグで使用しても、ほとんどのブラウザでは機能しませんbyデザイン。

イメージタグは自己完結型（<tag />）タグ（コンテンツが含まれていないため）。コンテンツが含まれていないため、生成されたコンテンツを追加できません（::after）または前置（::before）を既存のコンテンツに追加します。

上記のリンク先の記事には、2つの回避策がリストされています。 CSSの回避策は本質的に非常にハックですが、jQueryソリューションははるかに洗練されていますが、有効になっているJavaScriptと含まれているjQueryライブラリーの両方に依存します。

47
crush