問題タブ [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.
html - CSS の著作権記号 :Pseudo-Element の後
解決済み-\00a9
の代わりに使用©
かなり自明です:
HTML では、©
シーケンスは著作権文字を挿入します。私がここでやろうとしているように、これは CSS 擬似要素で行うことができますか?
css - 画像に取り組んでいない後に CSS ホバーしますか?
私はフィドルを作りました: http://jsfiddle.net/ATdRD/
誰でもこれを修正したり、これが機能しない理由を見つけたりできますか??
ユーザーが画像にカーソルを合わせると、ツールチップのようにスタイルを設定できるデータタイトルが表示されます
css - :after/:before 疑似クラス内の CSS トランジション プロパティをアニメーション化する
CSS 疑似クラスをアニメーション化することは可能ですか?
私が持っているとしましょう:
これは可能ですか?私はテストを行ってきましたが、これまでのところ解決策が見つからないようです。Modernizr を使用して、必要な JavaScript サポートの量を削減しようとしています。
私はすでに JavaScript メソッドを持っているので、JavaScript の代替手段は使用しないでください。
css - 擬似要素の前の Z インデックス
before-pseudo 要素を使用して「header」要素を作成しました。疑似要素は親要素の後ろにある必要があります。「ヘッダー」に z-index を与える瞬間まで、すべてがうまく機能します。
私が欲しいもの:前景に黄色の「ヘッダー」、背景に赤い疑似要素、黄色の「ヘッダー」要素に30の単純なz-index。
このリンク ( http://jsfiddle.net/tZKDy/ ) で私の問題をテストできます。「ヘッダー」要素で z-index を設定/削除すると問題が発生します。
css - 要素をアニメーション化すると、関連する疑似要素のスタッキングコンテキストが壊れるのはなぜですか?
生成されたコンテンツの::beforeと::afterを関連付けた要素をアニメーション化すると、以前は負のzインデックスが付けられていた生成されたコンテンツが、元の要素よりも高いインデックスになっているように見えます。これはChrome、Safari、Firefoxで見られます。
私はそれが紛らわしいことを知っているので、ここにフィドルがあります。
私が間違っている、またはバグに遭遇した場合のアイデアはありますか?
css - CSS::before {content:url(..)}要素で画像を拡大縮小することは可能ですか?
わかりました、私は今遊んでいる領域にいることを認めます...
私が達成したいこと:Webアプリケーションにいくつかの要素を追加するために使用されるユーティリティリンクの前にプラス記号があるはずです。
この記号は、ユーザーが設定したフォントサイズに応じて拡大縮小されると便利です。
私が試したこと:
残念ながら、height属性は無視されます。<img../>
すべてのリンクの前に法線を挿入するだけでよいことはわかっていますが、それは私たちが望むほど維持可能ではありません。
または、たとえば、派手なUnicode文字の1つを使用できます
今のところ、Unicodeのアイデアを使用します(IE8でこれをテストしたばかりです...いいえ、IE 8はその文字を表示しません(「ギリシャ十字」)... :-()...わかりました、 IE8、FF、そしておそらくクロームで表示される適切な文字を見つけたら、ユニコードのアイデアを採用してください。
それでも、私の最初のアイデアはどういうわけか実行可能かどうか疑問に思います
html - :after 疑似要素を使用して画像を繰り返す
http://cl.ly/0m3F0j392e0G1n0s0T34理想的 には、見出しにテキストを使用し、その後に 10px x 10px の gif を水平方向に繰り返します。
編集: h2 要素に無地の色を設定できないように、テクスチャ付きの背景を使用したいことを追加する必要があります。
見出しの後にGIFを追加できましたが、repeat-xを追加しても繰り返すことができません。私が使用したコードは次のとおりです。
この方法または代替方法の回避策はありますか? 見出し全体を画像としてスライスすることは避けたいと思います。見出しを左に浮かせてから、gif を繰り返し背景画像として右に空の div を浮かせることを考えましたが、これが :after 疑似要素の目的だと思いますよね?
css - 擬似要素への WebKit トランジションの適用
参照用に Fiddle を作成しました: http://jsfiddle.net/xypQY/
不透明度を使用してフェードイン効果を実現するには、どの要素に WebKit トランジションを適用しますか?
css - 疑似要素の前に配置する適切な方法
:before
写真のような要素や:after
疑似要素を配置する適切な方法は何ですか?私はさまざまな方法をいじっていますが、どれも非常にエレガントな解決策のようには見えません。
これが私がやろうとしていることです:
これは私がしたことです:
基本的には、画像をテキストに揃えたいだけです。それを行う別の方法はありますか?
:before
画像にパディングとマージンを使用できれば完璧です。それがあなたの仕事のはずです。しかし、何らかの理由で、それは私にとってはうまくいきませんでした。水平方向のパディングとマージンを追加できますが、上下のパディングは何もしません。なぜそれが起こるのでしょうか?
html - 疑似要素のcssスタイルを変更する:Jqueryでコンテンツの後
私はCSS3で設計された風船の形をしています。
JS Fiddle Example
で作られた三角形があります
Jqueryで左側のCSSパラメータを変更して、三角形を左右に移動する必要があります。DOM の外にある疑似要素を選択できないことはわかっていますが、:after スタイルを js で変更する別の方法はありますか?
はい、次のように別の div を内部に配置できます
しかし、それは醜いです