問題タブ [css-content]

""content プロパティの値は何を意味しますか?

したがって、CMS によって生成されるナビゲーション メニューがあります。

メニューの HTML は単純です (わかりやすくするために編集されています)。

サイトの一般的なテーマに沿って、メニュー項目ごとに個別の PNG ファイルを使用して、項目を手書きのテキストとして表示したいと考えています。

そのために、CSScontentプロパティを次のように使用しました。

そして、それはうまくいきました！各アイテムの HTML テキストは正しい画像に置き換えられました。

しかし、残念ながら、すべてのブラウザー がとcontent以外のセレクターのプロパティをサポートしているわけではないことを知りました。Chrome と Safari はそれを行いますが、Firefox は行いません。ただし、を使用すると、HTML ノードは置き換えられませんが、画像が追加されます。:before:after :before

これを回避するにはどうすればよいですか?

うまくいかなかったもの：

• <a>要素を作成するとdisplay: none、パーツも削除さ:beforeれます。
• <a>要素を作成して別のposition: absolute場所に移動しても機能しません。
• 追加された画像がドキュメントフローにないため、<a>要素を作成するwidth: 0pxとレイアウトが台無しになります。content

やりたくないこと：

• もちろん、画像を手動で出力することもできますが、CMS が提供<li>するテキストを含む HTML で作業したいと考えています。

• 関連するソリューションでbackground-imageは、スタイルシートで各アイテムの幅と高さを指定する必要がありますが、この質問の目的では避けたいと思います。

• 手書きをフォントに変換することはオプションではありません。

• JavaScript を使用してその場でアイテムを置き換えることはできません。これは、純粋な HTML と CSS を使用して機能する必要があります。

動的ブレッドクラムの一連のスタイルを作成しています。

ブレッドクラムの前のすべてのステップには、border-bottom とスラッシュが必要です。スラッシュは :before として実行されます。

問題は、前の 2 つのステップの間にスラッシュがあり、右側の境界線に隙間がないことです。

この問題をよりよく説明するには、このコードペンを参照してください... http://codepen.io/anon/pen/dJEen

:before で border-bottom:0 を実行しようとしましたが、これは何もしません。私のコード:

HTML

CSS

どんな助けでも大歓迎です。

コードで：

このスレッドで説明されているように、透明な背景を作成しようとしています: How to set opacity in parent div and not impact in child div? .

4番目の回答のコードを見てください。これはどのように機能しますか? と の使用に混乱してい.parentます.parent:before。.parent:beforeこれにより、すべての親要素の前に要素が作成されると思います。これがどのように機能するのか本当に混乱していますか？

after プロパティを使用して、透明な画像を別の画像に重ねようとしています。この方法を使用しても表示されません。可能であれば、base64 でエンコードされた画像を使用したいと考えています。通常のエンコードされていない画像でも試しました。サイコロはありません。誰にも考えはありますか？

私のHTML：

私のCSS：

私はcssの組み合わせを使用して:before、:hoverボタンに画像を追加しています。

私が遭遇した問題は、:before要素にカーソルを合わせると、画像の位置の変更が正しくトリガーされますli:hoverが、要素を作成したものではありません:before。:beforeこれは、要素が の上に置かれ、 がトリガーされliないようにする方法が原因であると推測しています。:hover

何が起こっているのかをよりよく説明するための画像を次に示します。

ここに私のCSSがあります:

そしてHTML：

そして、ここに実用的なフィドルがあります http://jsfiddle.net/wf_4/B42SH/

関連するコードペン: http://codepen.io/anon/pen/ocptF/

編集: codepen は Jade を使用しているため、いくつかの点が台無しになっています。この質問を始めたとき、私はこれに気づいていませんでした。基本的に、CSS attr() は文字通り HTML 属性をコピーすると思っていましたが、そうではありません。

attrCSS関数を使用して、いくつかの疑似要素を埋めたいと思いcontentます。ただし、004HTML 属性が に設定されている場合\f004、および.08fa\f08fa

関連する行:

HTML:

CSS:

ありがとう！

CMS エディターが、CSS オーバーライドのみを使用して、ページ タイトルに使用されるテキストを交換できるようにしようとしています。

:before または :after タグを使用すると、利用可能な多くの代替タイトルのいずれかを使用できます。

私たちも言うことができれば、

残念ながら、私が知る限り、「このページのデフォルト タイトル」を非表示にして「別のタイトル」に置き換える良い方法はありません。これがスプライトの場合、Phark などの使い古された画像置換技術のいずれかを使用できます。:before によって生成されたテキスト置換では、それほど多くはありません。:before は、デフォルト テキストを非表示にするために使用される CSS デバイスの影響も受けるため、たとえば Phark では、:before コンテンツも -9999px になります。

私が避けようとしている解決策があります。

1. Phark メソッドまたは何かを使用してデフォルトのテキストを非表示にし、:before コンテンツで絶対配置を使用して左: 0、上: 0 に戻します。可能であればフローを維持したい/維持する必要があります。
2. 「ページのデフォルト タイトル」をスパンでラップし、別のタイトルが使用されているときに CSS で display: none に設定するだけです。

すなわち

これは機能しますが、ヘッダーにネストされたスパンは不快です。

生成された :before/:after コンテンツをターゲットにせずに、タグのテキストをターゲットにする方法はありますか? これを行う別の方法はありますか？