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

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

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

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

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

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

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

余談として、この態様における擬似要素と擬似クラスとの間の主な違いは、デフォルトで継承される特性があります継承することにより、:before及び:after疑似クラススタイルがちょうど全く適用されないのに対し、発電素子から。たとえば、要素のtext-align: justifyインラインスタイル属性に配置した場合td、それはによって継承されtd:afterます。ただしtd:after、インラインスタイル属性を使用して宣言することはできません。スタイルシートで行う必要があります。

上記のとおり：css疑似クラス/ -elementをインラインで呼び出すことはできません。私が今やったことは、あなたの要素に一意の識別子、f.exを与えます。IDまたは一意のクラス。そしてフィッティング<style>要素を書く

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

あいまいですが、インラインCSSは何ですか..？

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

 <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>

David Thomasが言ったように、インラインCSSの疑似クラスまたは疑似要素を ターゲットにすることはできません。より多くの詳細に関しては、このことで答えをBoltClockについて擬似クラス

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

擬似要素についても同じように書くことができます

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

インラインCSSで疑似要素を作成することはできません。

ただし、スタイルシートで疑似要素を作成できる場合は、インラインスタイルを親要素に設定し、継承キーワードを使用して疑似要素のスタイルを設定することで、インラインでスタイルを設定する方法があります。

<parent style="background-image:url(path/to/file); background-size:0px;"></p>

<style> 
   parent:before{
      content:'';
      background-image:inherit;
      (other)
   }
</style>

時々これは便利です。

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

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

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

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

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>

覚えておいてください。「実際の」before要素とafter要素、およびインラインCSSを持つものは、ページのサイズを大幅に増やし、外部CSSと疑似要素によって可能になるページ読み込みの最適化を無視します。

あなたは使うことができます

parent.style.setProperty("--padding-top", (height*100/width).toFixed(2)+"%");

CSSで

el:after{
  ....
  padding-top:var(--padding-top, 0px);
}