タグ付けされた質問 「pseudo-element」

jQueryを使用して::beforeand ::after（および1つのセミコロンを持つ古いバージョン）などのCSS疑似要素を選択/操作する方法はありますか？ たとえば、私のスタイルシートには次のルールがあります。 .span::after{ content:'foo' } jQueryを使用して「foo」を「bar」に変更するにはどうすればよいですか？

943 javascript  jquery  css  jquery-selectors  pseudo-element 

:afterCSS疑似要素をinputフィールドで使用しようとしていますが、機能しません。と一緒に使用するとspan、問題なく動作します。 <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> これは機能します（「buu！」の後、「もう少し」の前にスマイリーを置きます） <span class="mystyle">buuu!</span>a some more これは機能しません-someValueを赤で着色するだけですが、笑顔はありません。 <input class="mystyle" type="text" value="someValue"> 何が悪いのですか？別の疑似セレクターを使用する必要がありますか？ 注：はサードパーティのコントロールによって生成されているため、のspan周りにを追加することはできませんinput。

685 html  css  pseudo-element  css-content 

次のようなスタイルの要素のリストがあります。 ul { list-style-type: none; text-align: center; } li { display: inline; } li:not(:last-child):after { content:' |'; } <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> コードスニペットを実行する結果を非表示スニペットを展開 のOne | Two | Three | Four | Five |代わりに出力One | Two | Three | Four | Five 最後の要素以外をすべてCSSで選択する方法を知っている人はいますか？ ここで:not()セレクタの定義を見ることができます

369 css  css-selectors  pseudo-element 

書き方:hoverと:visited条件付けa:before？ 私は試してa:before:hoverいますが、うまくいきません

347 css  css-selectors  pseudo-element  pseudo-class 

画像を使用して特定のファイルタイプへのリンクを装飾したいとします。リンクを次のように宣言できます <a href='foo.pdf' class='pdflink'>A File!</a> それからCSSのような .pdflink:after { content: url('/images/pdf.png') } これでpdf.png、リンクテキストのサイズが適切でない場合を除いて、これはうまく機能します。 ブラウザに:after画像を拡大縮小するように指示したいのですが、私は一生正しい構文を見つけることができません。それとも、サイズ変更ができない背景画像のようなものですか？ ETA：私は、a）ソース画像を「適切な」サイズ（サーバー側）にサイズ変更するか、b）マークアップを変更して、単純にIMGタグをインラインで提供するようにしています。私はそれらの両方を避けようとしていましたが、CSSで純粋に何かをやろうとするよりも互換性があるように思えます。私の元の質問への答えは「あなたができるように思わ一種の時々 、それを行います」。

251 css  pseudo-element 

CSS contentプロパティに文字列の代わりにHTMLコード:beforeまたは次:afterのような要素を挿入させることが可能かどうか疑問に思っています。 .header:before{ content: '<a href="#top">Back</a>'; } これは非常に便利です... Javascriptを使用して行うこともできますが、CSSを使用すると簡単に生活できます:)

246 html  css  pseudo-element  css-content 

Webページの段落タグのレイアウトにスイッチを使用したいのですが。 私は後の疑似要素を使用します： p:after {content: url("../img/paragraph.gif");} 次に、このCSSコードをページから削除する必要があります。 これはどのように簡単に行うことができますか？ 追加したい： jQueryは既にページで使用されています CSSを含むファイルを含めたり削除したりしたくありません。

236 javascript  html  css  pseudo-element 

私は、結合したい:afterと:hoverCSS（または任意の他の疑似セレクタ）で。基本的にはリストがあり、selectedクラスを持つアイテムにはを使用して適用される矢印の形があり:afterます。ホバーされているオブジェクトでも同じようにしたいのですが、うまく動かせません。コードはこちら #alertlist { list-style:none; width: 250px; } #alertlist li { padding: 5px 10px; border-bottom: 1px solid #e9e9e9; position:relative; } #alertlist li.selected, #alertlist li:hover { color: #f0f0f0; background-color: #303030; } #alertlist li.selected:after { position:absolute; top: 0; right:-10px; bottom:0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #303030; content: …

176 css  css-selectors  pseudo-element 

とにかく、擬似で回転を機能させる content:"\24B6"? Unicodeシンボルを回転させようとしています。

159 css  rotation  pseudo-element 

インラインCSS（つまり、style属性内のCSS ）を使用してHTMLメール署名を作成しています。:beforeおよび:after疑似要素を使用できるかどうかについて知りたいです。 もしそうなら、インラインCSSでこのようなものをどのように実装しますか？ td { text-align: justify; } td:after { content: ""; display: inline-block; width: 100%; }

141 html  css  css-selectors  pseudo-element  inline-styles 

CSS 2.1 :afterとCSS 3の::after疑似セレクター（::after以前のブラウザーではサポートされていないものを除く）の間に機能的な違いはありますか？新しい仕様を使用する実用的な理由はありますか？

133 css  css-selectors  pseudo-element  pseudo-class 

私は、Modal絶対的に配置され、親の上にzインデックスが付けられ、JQueryで適切に配置されたCSSクラスを持っています。モーダルボックスの上部にキャレット画像（^）を追加したいのですが、:beforeCSS疑似セレクターを使用してこれをきれいに行うことを検討していました。 画像は絶対的にモーダルの上に配置し、Zインデックスを付ける必要がありますが、適切なクラスを画像のcontent属性に追加する方法が見つかりませんでした。 .Modal:before{ content:url('blackCarrot.png') /* with class ModalCarrot ??*/ } .ModalCarrot{ position:absolute; left:50%; margin-left:-8px; top:-16px; } 次善のオプション-スタイルをインラインでcontent属性に追加できますか？

116 css  modal-dialog  pseudo-element 

:before同じ要素に複数の疑似を持つことは可能ですか？ .circle:before { content: "\25CF"; font-size: 19px; } .now:before{ content: "Now"; font-size: 19px; color: black; } 上記のスタイルをjQueryを使用して同じ要素に適用しようとしていますが、最新のスタイルのみが適用され、両方が適用されることはありません。

116 css  css-selectors  pseudo-element  css-content 

IE7とIE8は疑似要素（::afterまたは::first-letter）のダブルコロン表記をサポートしていないため、また、最近のブラウザー:afterは後方互換性のためにシングルコロン表記（たとえば）をサポートしているため、シングルコロン表記のみを使用する必要があります。 IE8の市場シェアがごくわずかなレベルまで下がって、コードベースを見つけて置き換えますか？または両方を含める必要があります： .foo:after, .foo::after { /*styles*/ } IE8ユーザー（貧しい人々）のことを気にすると、doubleだけを使用するのはばかげているように見えます。

108 css  internet-explorer-8  css-selectors  internet-explorer-7  pseudo-element 

CSS :afterプロパティの動作を理解できません。仕様によると（こことここ）： 名前が示すように、:beforeおよび:after擬似要素は、要素のドキュメントツリーコンテンツの前後のコンテンツの場所を指定します。 これは、:after（または:before）プロパティを持つことができる要素に制限を課すようには見えません。ただし、特定の要素でのみ機能するようです... <p>機能<img>しますか、<input>機能しません、<table>機能しません。もっとテストすることはできますが、要点はわかります。これはブラウザ間でかなり一貫しているように見えることに注意してください。オブジェクトが:beforeand :afterプロパティを受け入れることができるかどうかを決定するものは何ですか？

100 css  pseudo-element