web-dev-qa-db-ja.com

インラインCSSでCSS：beforeおよび：after擬似要素を使用していますか？

インラインCSS（つまり、style属性のCSS）を使用してHTML電子メール署名を作成していますが、:beforeおよび:after疑似要素を使用できるかどうかに興味があります。

もしそうなら、インラインCSSでこのようなものをどのように実装しますか？

td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
htmlcsscss-selectorspseudo-elementinline-styles
118
Bah-Bee

擬似要素にインラインスタイルを指定することはできません。

これは、疑似クラスのような疑似要素（ この他の質問 に対する私の答えを参照）は、HTMLで表現できないドキュメントツリーの抽象化としてセレクタを使用してCSSで定義されているためです。一方、インラインstyle属性は、特定の要素のHTML内で指定されます。

インラインスタイルはHTMLでのみ発生するため、インラインスタイルは定義されているHTML要素にのみ適用され、生成される擬似要素には適用されません。

余談ですが、この側面における擬似要素と擬似クラスの主な違いは、デフォルトで継承されるプロパティ willであることです継承 生成要素からの:beforeおよび:afterにより、擬似クラススタイルはまったく適用されません。たとえば、td要素のインラインスタイル属性にtext-align: justifyを配置すると、td:afterによって継承されます。警告は、インラインスタイル属性でtd:afterを宣言できないことです。スタイルシートで行う必要があります。

101
BoltClock

前述のように、css疑似クラス/要素をインラインで呼び出すことはできません。私が今やったことは、あなたの要素に一意の識別子f.exを与えることです。 IDまたは一意のクラス。そして、適切な<style>要素を書く

<style>#id29:before { content: "*";}</style>
<article id="id29">
  <!-- something -->
</article>

fuいですが、インラインCSSはどのようなものではありませんか？

33
honk31

いいえ、 pseudo-classes または pseudo-elements inline-cssをDavid Thomas言った。詳細については、 this answer byBoltClockaboutPseudo-classes

いいえ。style属性は、特定のHTML要素のスタイルプロパティのみを定義します。疑似クラスはセレクターファミリーのメンバーであり、属性.....では発生しません。

擬似要素にも同じ使用法を書くことができます

いいえ。style属性は、特定のHTML要素のスタイルプロパティのみを定義します。擬似クラスと擬似要素は、セレクターファミリーのメンバーです。これらは属性には存在しないため、インラインでスタイルを設定することはできません。

7
Champ

インラインでデータを使用できます

 <style>   
 td { text-align: justify; }
 td:after { content: attr(data-content); display: inline-block; width: 100%; }
</style>

<table><tr><td data-content="post"></td></tr></table>
7
Cevher

はい、可能です、追加する要素のインラインスタイルを追加するだけです。

 <style>
     .horizontalProgress:after { width: 45%; }
 </style><!-- Change Value from Here -->

 <div class="horizontalProgress"></div>
3
sandip7400

前に述べたように、擬似クラスのスタイリングにインライン要素を使用することはできません。 前後 擬似クラスは要素の状態であり、実際の要素ではありません。これにはJavaScriptしか使用できません。

0
Nesha Zoric

HTMLを制御できる場合は、擬似要素の代わりに実際の要素を追加できます。 ：beforeおよび：after擬似要素は、開始タグの直後または終了タグの直前にレンダリングされます。このCSSに相当するインライン

td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }

このようなものになります：

<table>
<tr>
<td style="text-align: justify;">
TD Content
<span class="inline_td_after" style="display: inline-block; width: 100%;"></span>
</td>
</tr>
</table>

覚えておいてください。インラインcssを使用した「実際の」前後の要素および何かは、ページのサイズを大幅に増加させ、外部cssおよび擬似要素が可能にするページ読み込みの最適化を無視します。

0
txyoji