Używanie pseudoelementów CSS: before i: after z wbudowanym CSS?

Robię to HTML email podpisu inline CSS (tj CSS w styleatrybutach) i jestem ciekaw, czy to możliwe, aby wykorzystać :beforei :afterpseudo-elementy.

Jeśli tak, jak zaimplementowałbym coś takiego z wbudowanym CSS?

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

Nie możesz określić stylów wbudowanych dla pseudoelementów.

Dzieje się tak, ponieważ pseudoelementy, takie jak pseudoklasy (zobacz moją odpowiedź na to inne pytanie ), są zdefiniowane w CSS przy użyciu selektorów jako abstrakcji drzewa dokumentu, których nie można wyrazić w HTML. Z styledrugiej strony atrybut wbudowany jest określony w HTML dla konkretnego elementu.

Ponieważ style wbudowane mogą występować tylko w HTML, będą miały zastosowanie tylko do elementu HTML, w którym są zdefiniowane, a nie do wszystkich pseudoelementów, które generuje.

Nawiasem mówiąc, główna różnica między pseudoelementami a pseudoklasami w tym aspekcie polega na tym, że właściwości, które są dziedziczone domyślnie, będą dziedziczone przez element generujący :beforeiz :afterniego, podczas gdy style pseudoklas po prostu nie mają zastosowania. W twoim przypadku, na przykład, jeśli text-align: justifyumieścisz atrybut stylu wbudowanego dla tdelementu, zostanie on odziedziczony przez td:after. Zastrzeżenie jest takie, że nie możesz deklarować td:afterz atrybutem stylu wbudowanego; musisz to zrobić w arkuszu stylów.

jak wspomniano powyżej: nie jest możliwe wywołanie wbudowanej pseudoklasy / elementu css. co teraz zrobiłem, to: nadanie Twojemu elementowi unikalnego identyfikatora, np. identyfikator lub unikatową klasę. i napisz <style>element pasujący

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

fugly, ale jakiego css inline nie jest ..?

Możesz użyć danych w tekście

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

Nie, nie możesz kierować na pseudoklasy lub pseudoelementy w inline-css, jak powiedział David Thomas . Aby uzyskać więcej informacji zobacz tę odpowiedź za BoltClock o Pseudoklasy

Nie. Atrybut style definiuje tylko właściwości stylu dla danego elementu HTML. Pseudoklasy należą do rodziny selektorów, które nie występują w atrybucie .....

Możemy również napisać use dla pseudoelementów

Nie. Atrybut style definiuje tylko właściwości stylu dla danego elementu HTML. Pseudoklasy i pseudoelementy są członkami rodziny selektorów, które nie występują w atrybucie, więc nie można ich stylizować w tekście.

Nie możesz tworzyć pseudoelementów w inline css.

Jeśli jednak możesz utworzyć pseudoelement w arkuszu stylów, istnieje sposób, aby nadać mu styl w tekście, ustawiając styl wbudowany w element nadrzędny, a następnie używając słowa kluczowego inherit, aby nadać styl pseudoelementowi, na przykład:

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

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

czasami może się to przydać.

Tak, jest to możliwe , po prostu dodaj style w tekście do elementu, który dodajesz po lub przed, Przykład

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

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

Jak wspomniano wcześniej, nie można używać elementów wbudowanych do stylizowania pseudoklas . Przed i po pseudoklasach są stany elementów, a nie rzeczywiste elementy. Możesz do tego użyć tylko JavaScript.

Jeśli masz kontrolę nad HTML, możesz dodać prawdziwy element zamiast pseudo. : before i: after Pseudoelementy są renderowane bezpośrednio po znaczniku open lub tuż przed znacznikiem close. Wbudowany odpowiednik tego css

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

Byłoby coś takiego:

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

Pamiętać; Twoje „prawdziwe” elementy przed i po oraz wszystko z wbudowanym css znacznie zwiększy rozmiar twoich stron i zignoruje optymalizacje ładowania strony, które umożliwiają zewnętrzne css i pseudoelementy.

możesz użyć

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

w css

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