23

I have an image that kind of slides up from the menu when you hover it. Because it's hidden under the menu i want to give the bottom of the image a little bit of deph by adding a dark fade to the bottom. I figured the best way to achieve this is to use pseudo elements. I don't really care much about IE support as it's such a small detail.

So, here's what i've got:

.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;
  }

First off, i'm unsure whether to use double or single colons before "after". I've always used one but recently i noticed people using two, so what's the way to go? Either seems to work!

You can see it in action here: http://goo.gl/RupQa

It's the yellow logo popping up above the header menu. Why am i not seeing a 20x20 red box above the image? The parent (.trygg-ehandel-icon) is absolute positioned, so the pseudo element should show up relative to it, right?

I've been trying to fix this for over an hour now, any suggestions?

4

1 に答える 1

49

この質問で答えたように。

設計上、タグを使用beforeしafterたpsuedo-elementsはimg、ほとんどのブラウザでは機能しません。

画像タグにはコンテンツが含まれていないため、自己閉鎖（<tag />）タグです。コンテンツが含まれていないため、生成されたコンテンツを既存のコンテンツに追加（ ::after）または追加（ ）することはできません。::before

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

于 2013-01-29T15:38:22.327 に答える