問題タブ [pseudo-element]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
74249 参照

html - CSS の著作権記号 :Pseudo-Element の後

解決済み-\00a9の代わりに使用©

かなり自明です:

HTML では、©シーケンスは著作権文字を挿入します。私がここでやろうとしているように、これは CSS 擬似要素で行うことができますか?

0 投票する
3 に答える
7969 参照

css - 画像に取り組んでいない後に CSS ホバーしますか?

私はフィドルを作りました: http://jsfiddle.net/ATdRD/

誰でもこれを修正したり、これが機能しない理由を見つけたりできますか??

ユーザーが画像にカーソルを合わせると、ツールチップのようにスタイルを設定できるデータタイトルが表示されます

0 投票する
4 に答える
45450 参照

css - :after/:before 疑似クラス内の CSS トランジション プロパティをアニメーション化する

CSS 疑似クラスをアニメーション化することは可能ですか?

私が持っているとしましょう:

これは可能ですか?私はテストを行ってきましたが、これまでのところ解決策が見つからないようです。Modernizr を使用して、必要な JavaScript サポートの量を削減しようとしています。

私はすでに JavaScript メソッドを持っているので、JavaScript の代替手段は使用しないでください。

デモ: http://jsfiddle.net/MxTvw/

0 投票する
2 に答える
24877 参照

css - 擬似要素の前の Z インデックス

before-pseudo 要素を使用して「header」要素を作成しました。疑似要素は親要素の後ろにある必要があります。「ヘッダー」に z-index を与える瞬間まで、すべてがうまく機能します。

私が欲しいもの:前景に黄色の「ヘッダー」、背景に赤い疑似要素、黄色の「ヘッダー」要素に30の単純なz-index。

このリンク ( http://jsfiddle.net/tZKDy/ ) で私の問題をテストできます。「ヘッダー」要素で z-index を設定/削除すると問題が発生します。

0 投票する
1 に答える
140 参照

css - 要素をアニメーション化すると、関連する疑似要素のスタッキングコンテキストが壊れるのはなぜですか?

生成されたコンテンツの::beforeと::afterを関連付けた要素をアニメーション化すると、以前は負のzインデックスが付けられていた生成されたコンテンツが、元の要素よりも高いインデックスになっているように見えます。これはChrome、Safari、Firefoxで見られます。

私はそれが紛らわしいことを知っているので、ここにフィドルがあります。

私が間違っている、またはバグに遭遇した場合のアイデアはありますか?

0 投票する
1 に答える
3464 参照

css - CSS::before {content:url(..)}要素で画像を拡大縮小することは可能ですか?

わかりました、私は今遊んでいる領域にいることを認めます...

私が達成したいこと:Webアプリケーションにいくつかの要素を追加するために使用されるユーティリティリンクの前にプラス記号があるはずです。
この記号は、ユーザーが設定したフォントサイズに応じて拡大縮小されると便利です。

私が試したこと:

残念ながら、height属性は無視されます。<img../>すべてのリンクの前に法線を挿入するだけでよいことはわかっていますが、それは私たちが望むほど維持可能ではありません。

または、たとえば、派手なUnicode文字の1つを使用できます

今のところ、Unicodeのアイデアを使用します(IE8でこれをテストしたばかりです...いいえ、IE 8はその文字を表示しません(「ギリシャ十字」)... :-()...わかりました、 IE8、FF、そしておそらくクロームで表示される適切な文字を見つけたら、ユニコードのアイデアを採用してください。

それでも、私の最初のアイデアはどういうわけか実行可能かどうか疑問に思います

0 投票する
4 に答える
12957 参照

html - :after 疑似要素を使用して画像を繰り返す

http://cl.ly/0m3F0j392e0G1n0s0T34理想的 には、見出しにテキストを使用し、その後に 10px x 10px の gif を水平方向に繰り返します。

編集: h2 要素に無地の色を設定できないように、テクスチャ付きの背景を使用したいことを追加する必要があります。

見出しの後にGIFを追加できましたが、repeat-xを追加しても繰り返すことができません。私が使用したコードは次のとおりです。

この方法または代替方法の回避策はありますか? 見出し全体を画像としてスライスすることは避けたいと思います。見出しを左に浮かせてから、gif を繰り返し背景画像として右に空の div を浮かせることを考えましたが、これが :after 疑似要素の目的だと思いますよね?

0 投票する
2 に答える
3777 参照

css - 擬似要素への WebKit トランジションの適用

参照用に Fiddle を作成しました: http://jsfiddle.net/xypQY/

不透明度を使用してフェードイン効果を実現するには、どの要素に WebKit トランジションを適用しますか?

0 投票する
4 に答える
101811 参照

css - 疑似要素の前に配置する適切な方法

:before写真のような要素や:after疑似要素を配置する適切な方法は何ですか?私はさまざまな方法をいじっていますが、どれも非常にエレガントな解決策のようには見えません。

これが私がやろうとしていることです:

ここに画像の説明を入力してください

これは私がしたことです:

基本的には、画像をテキストに揃えたいだけです。それを行う別の方法はありますか?

:before画像にパディングとマージンを使用できれば完璧です。それがあなたの仕事のはずです。しかし、何らかの理由で、それは私にとってはうまくいきませんでした。水平方向のパディングとマージンを追加できますが、上下のパディングは何もしません。なぜそれが起こるのでしょうか?

0 投票する
3 に答える
42324 参照

html - 疑似要素のcssスタイルを変更する:Jqueryでコンテンツの後

私はCSS3で設計された風船の形をしています。
JS Fiddle Example で作られた三角形があります

Jqueryで左側のCSSパラメータを変更して、三角形を左右に移動する必要があります。DOM の外にある疑似要素を選択できないことはわかっていますが、:after スタイルを js で変更する別の方法はありますか?

はい、次のように別の div を内部に配置できます

しかし、それは醜いです