4

親要素の背景の背後にある CSS 疑似:after要素を取得することは可能ですか?

の背景には:after、親要素の背景と同じ寸法が含まれています。したがって、現在は次のようになっています。

ここに画像の説明を入力

:afterしかし、赤い背景 ( ) を親要素の後ろに配置したいです。position: relativeそのため、親要素とabsolute疑似要素に追加しました。

これをアーカイブしようとして、次のコードを使用しました:

.btn {
  position: relative;
  display: inline-block;
  padding: .8rem 1rem;
  font-size: 1rem;
  background: #000;
}

.btn:after {
  position: absolute;
  bottom: -0.3rem; right: -0.3rem;
  z-index: -1;

  width: 100%; height: 100%;
  content:'';
  background: red;
}
<a href="" class="btn">
  This is my button
</a>

奇妙なことは、上記のスニペットが魅力のように機能することです。しかし、私のライブの例では、このトピックの画像とまったく同じコードが表示されます..誰かがライブサイトで何が間違っているか知っていますか?

4

3 に答える 3

3

:beforeまたは:after疑似要素は子要素と見なされ、要素のスタック コンテキストにより、要素をこのように親の背後に表示:afterすることはできません。

ただし、目的box-shadowの効果を実現するソリッドな「境界線」を作成するために使用できます。次に例を示します。

.btn{
  box-shadow: red 6px 7px 0 0;
}
于 2015-12-09T22:50:08.457 に答える
2

Web サイトには、次の CSS ルールがあります。

.btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: .8rem 1rem;
  font-size: 1rem;
  background: #000;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

プロパティを削除するz-index: 1と、CSS は正しく機能します。このプロパティは、上で提供したサンプル スニペットにはありません。

Firefox で CSS インスペクターを使用して試してみたところ、問題が解決したようです。

于 2015-12-09T22:54:23.297 に答える