Satır içi CSS ile sözde elemanlardan önce ve sonra CSS mi kullanıyorsunuz?

Satır içi CSS ( styleözniteliklerde CSS ) ile bir HTML e-posta imzası yapıyorum ve :beforeve :aftersözde öğeleri kullanmak mümkün olup olmadığını merak ediyorum .

Öyleyse, satır içi CSS ile böyle bir şeyi nasıl uygulayabilirim?

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

Sözde öğeler için satır içi stiller belirtemezsiniz.

Bunun nedeni, sözde sınıflar (sözde diğer soruya verdiğim yanıt) gibi sözde öğelerin, seçiciler kullanılarak HTML'de ifade edilemeyen belge ağacının soyutlamaları olarak CSS'de tanımlanmasıdır. styleÖte yandan, belirli bir öğe için HTML içinde bir satır içi özellik belirtilir.

Satır içi stiller yalnızca HTML'de oluşabileceğinden, oluşturdukları sözde öğelere değil, yalnızca tanımlandıkları HTML öğesine uygulanır.

Bir yana, bu açıdan sözde elemanlar ve sözde sınıflar arasındaki temel fark, varsayılan olarak devralınan özelliklerin oluşturucu eleman tarafından miras alınacağı:before ve :aftersözde sınıf stillerinin hiç uygulanmadığıdır. Örneğin, sizin durumunuzda, text-align: justifybir tdöğe için satır içi stil özniteliğine yerleştirirseniz , öğe tarafından devralınır td:after. Uyarı, td:aftersatır içi stil özniteliğiyle bildiremeyeceğinizdir ; stil sayfasında yapmalısınız.

Yukarıda belirtildiği gibi: bir css sözde sınıfı / -element satır içi çağırmak mümkün değildir. şimdi yaptığım şey: öğenize benzersiz bir tanımlayıcı vermek, f.ex. bir kimlik veya benzersiz bir sınıf. ve bir bağlantı <style>elemanı yazın

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

çirkin, ama ne satır içi css değil ..?

Verileri satır içi olarak kullanabilirsiniz

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

Hayır , David Thomas'ın dediği gibi inline-css'deki sözde sınıfları veya sözde öğeleri hedefleyemezsiniz . Daha fazla ayrıntı için BoltClock'un Pseudo sınıfları hakkındaki bu cevaba bakınız.

Hayır. Style niteliği, yalnızca belirli bir HTML öğesinin stil özelliklerini tanımlar. Sözde sınıflar, öznitelikte yer almayan seçiciler ailesinin bir üyesidir .....

Ayrıca sözde elemanlar için de aynı şekilde yazabiliriz

Hayır. Style niteliği, yalnızca belirli bir HTML öğesinin stil özelliklerini tanımlar. Sözde sınıflar ve sözde öğeler, seçicilerin ailesinin bir üyesidir, bu özellik satır içinde stil oluşturamazsınız.

Satır içi css'de sözde öğeler oluşturamazsınız.

Bununla birlikte, bir stil sayfasında bir sözde öğe oluşturabiliyorsanız, üst öğeye bir satır içi stil ayarlayıp ardından sözde öğeye stil oluşturmak için inherit anahtar sözcüğünü kullanarak satır içi stil vermenin bir yolu vardır:

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

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

bazen bu kullanışlı olabilir.

Evet , mümkün , sonra veya önce eklediğiniz öğe için satır içi stiller ekleyin, Örnek

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

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

Daha önce de belirtildiği gibi, sözde sınıfları şekillendirmek için satır içi öğeleri kullanamazsınız . Yalancı sınıflardan önce ve sonra asıl elemanlar değil, elemanların halleridir. Bunun için yalnızca JavaScript kullanabilirsiniz.

HTML üzerinde kontrolünüz varsa, sözde yerine gerçek bir öğe ekleyebilirsiniz. : before ve: psseudo elemanları open etiketinden hemen sonra veya close etiketinden hemen önce oluşturulur. Bu css için satır içi eşdeğeri

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

Böyle bir şey olurdu:

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

Aklında tut; Öğelerinizden önce ve sonra "gerçek" ve satır içi css olan her şey sayfalarınızın boyutunu büyük ölçüde artıracak ve harici css ve sözde öğelerin mümkün kıldığı sayfa yükleme optimizasyonlarını yoksayacaktır.

kullanabilirsiniz

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

css olarak

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