問題タブ [pseudo-element]

http://jsfiddle.net/nicktheandroid/k93ZK/2/

これは本当に単純なはずです、なぜそれが機能しないのか理解できません。カーソルを合わせると、:before不透明度が1に変更されますが、変更されません。なんで？

編集：私はChromeを使用しています。

:afterCSSプロパティの動作がわかりません。仕様によると（こことここ）：

名前が示すように、:beforeおよび:after疑似要素は、要素のドキュメント ツリー コンテンツの前後のコンテンツの場所を指定します。

:afterこれは、どの要素が(または:before) プロパティを持つことができるかについて制限を課していないようです。ただし、特定の要素でのみ機能するようです...<p>機能する、<img>機能しない、<input>機能しない、<table>機能します。もっとテストできますが、要点はわかります。これはブラウザ間でかなり一貫しているように見えることに注意してください。オブジェクトがandプロパティを受け入れることができるかどうかを決定するものは何ですか?:before:after

:beforeで作成された影:afterは、親の下に入りdivます。どうすれば修正できますか？親の影は正常にdiv機能します。

CSS:

HTML:

私のモバイル デスクトップ ナビゲーション バーには、バックグラウンド ボタンがあります (デフォルト)。上に :after を使用して、ホバーすると (lt. 青) およびコンテンツ ( url(image.alpha-png) ) または -webkit-mask-image に変化する背景 (無地の灰色) を持つ要素を挿入します。

:after をサポートしていない、または -webkit-mask-image を処理できないブラウザー/デバイスで何も表示しない (= デフォルトの背景画像) 方法を探しています。

フォールバックの背景色を削除することで疑似クラスで機能するようになりました（IE 7,8を処理します）。現在、表示されないブラウザー/デバイスでグレー/ブルーの背景を表示しない方法を探しています-webkit-mask-image をサポート (またはそれらが機能しない -o/-ms/-moz-相当物)

ここにいくつかのコードがあります：

HTML:

CSS (他のすべてのブラウザーのグラデーションとマスク CSS は省略しました):

-webkit はイメージ マスクを提供する唯一のベンダーであるため、次の点についてヘルプを探しています。

• Webkit 以外のデバイスで background-gradients を非表示にする
• FF、Opera の優れた代替手段に関する情報を提供します...
• CSSスプライトの「ネガティブ」を作成する必要があることを意味する、alpha-pngのイメージマスクを切り替えることが理にかなっているのかどうかについての意見

手伝ってくれてありがとう！

疑似要素 a:after a:before を使用すると、リンクの一部のように見えるテキストを追加できます。ただし、リンクの一部としてその部分をクリックできるようにする方法がわかりません。

たとえば、次の css はその後の URL を示しています。

...しかし、クリックできません。

基になる HTML を変更せずにこれを回避する人はいますか?

編集: クロム 13.0.782.107 を使用しています。それはバグであることが判明しました。（ありがとうショーン）

「カード」要素に、ページから持ち上げられたように見えるドロップシャドウを付けようとしています。:: after疑似要素、css-transform、およびボックスシャドウを使用してこれを実行しています。

Mac OSX、Chrome（最新バージョン）、Firefox5を使用しています。結果は次のとおりです。

ご覧のとおり、Firefoxのレンダリングには奇妙な境界線のようなアーティファクトがあります。これの色は、2番目のFirefoxの例でわかるように、ボディの背景色にリンクしているようです。

これを行うために、私は次のコードを持っています：

HTML：

CSS：

CSSはもう少しありますが、他のことを除外するのに十分な遊びをしたと確信しています。

プラットフォーム/ブラウザ固有の場合、および/または修正がある場合、これが発生している理由はありますか？助けてくれてありがとう！

このMS 互換性テーブルでは、IE9 は疑似要素::beforeと をサポートしていません::afterが、試してみるとサポートしているようです... JSBinを参照してください

私は何か間違ったことをしていますか？私はIE9から何かを隠すための素晴らしいツールだと思っ::beforeて::afterいましたが、実際にはそうではありません。

私はこのHTMLを持っています：

そしてこのCSS：

疑似要素が元の要素を完全にカバーするようにしたかった（IE7,8の50％のグラデーションが含まれているため、高さ：50％、マージン-下部：50％;）

ただし、IE9では... :: after要素は50％しかカバーしていませんが、特に高さを44pxに設定しました。これはフィルターを使用しているためですか？それをオーバーライドする方法はありますか？

これが例のJSBinです。

手伝ってくれてありがとう。

アップデート

全体の例を次に示します。

例

ノート：

• background.cssファイルのコメントを参照してください
• 要素の構造を変更したり、.ui-icon以外の要素にグラデーションを割り当てたりすることはできません
• グラデーションはフッターの50％をカバーする必要があります。フッターは44pxなので、グラデーションは22pxで停止します
• IE7 + 8はこれを行うことができない（または色が止まる）ので、.ui-iconの高さを22pxに加えてfilter-gradientを作成します
• :: beforeを使用して、.ui-iconの上にある他のすべてのブラウザのグラデーションを追加します

問題1=IE9+は::beforeをレンダリングします-私はz-index：-1を使用しているので、.ui-iconは:: before=OKの後ろにあります

問題2=IE9 +では、::beforeの背景が.ui-iconによって切り取られます。

質問：切断される前に::の勾配を回避するにはどうすればよいですか？