Menggunakan CSS: before dan: after pseudo-elements dengan inline CSS?

Saya membuat tanda tangan email HTML dengan inline CSS (yaitu CSS dalam styleatribut), dan saya ingin tahu apakah mungkin menggunakan :beforedan :afterpseudo-elemen.

Jika demikian, bagaimana saya mengimplementasikan sesuatu seperti ini dengan inline CSS?

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

Anda tidak dapat menentukan gaya sebaris untuk elemen semu.

Ini karena pseudo-elemen, seperti pseudo-class (lihat jawaban saya untuk pertanyaan lain ini ), didefinisikan dalam CSS menggunakan selektor sebagai abstraksi dari pohon dokumen yang tidak dapat diekspresikan dalam HTML. Sebuah inlinestyleAtribut , di sisi lain, ditentukan dalam HTML untuk elemen tertentu.

Karena gaya sebaris hanya dapat terjadi di HTML, gaya tersebut hanya akan diterapkan ke elemen HTML tempat gaya tersebut didefinisikan, dan tidak untuk elemen semu yang dihasilkannya.

Selain itu, perbedaan utama antara pseudo-elemen dan pseudo-class dalam aspek ini adalah bahwa properti yang diwarisi secara default akan diwarisi oleh :beforedan :afterdari elemen penghasil, sedangkan gaya pseudo-class tidak berlaku sama sekali. Dalam kasus Anda, misalnya, jika Anda menempatkan text-align: justifyatribut gaya sebaris untuk sebuah tdelemen, itu akan diwarisi oleh td:after. Peringatannya adalah Anda tidak dapat mendeklarasikan td:afterdengan atribut gaya sebaris; Anda harus melakukannya di stylesheet.

seperti disebutkan di atas: tidak mungkin memanggil inline pseudo-class / -element css. apa yang saya lakukan sekarang, adalah: berikan elemen Anda pengenal unik, f.ex. sebuah id atau kelas unik. dan tulis <style>elemen yang pas

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

fugly, tapi apa inline css isnt ..?

Anda dapat menggunakan data secara inline

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

Tidak, Anda tidak dapat menargetkan pseudo-class atau pseudo-elemen di inline-css seperti yang dikatakan David Thomas . Untuk lebih jelasnya lihat ini jawaban dengan BoltClock tentang Pseudo-kelas

Tidak. Atribut gaya hanya mendefinisikan properti gaya untuk elemen HTML tertentu. Kelas semu adalah anggota dari keluarga penyeleksi, yang tidak terjadi di atribut .....

Kita juga bisa menulis use same untuk pseudo-elemen

Tidak. Atribut gaya hanya mendefinisikan properti gaya untuk elemen HTML tertentu. Pseudo-class dan pseudo-elements adalah anggota dari keluarga penyeleksi, yang tidak terjadi dalam atribut sehingga Anda tidak dapat menatanya secara inline.

Anda tidak dapat membuat elemen semu di css sebaris.

Namun, jika Anda dapat membuat elemen pseudo di stylesheet, maka ada cara untuk menatanya secara inline dengan menyetel gaya sebaris ke elemen induknya, dan kemudian menggunakan kata kunci inherit untuk memberi gaya elemen pseudo, seperti ini:

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

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

terkadang ini bisa berguna.

Ya itu mungkin , cukup tambahkan gaya sebaris untuk elemen yang Anda tambahkan setelah atau sebelumnya, Contoh

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

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

Seperti yang disebutkan sebelumnya, Anda tidak dapat menggunakan elemen sebaris untuk menata kelas semu . Kelas pseudo sebelum dan sesudah adalah status elemen, bukan elemen sebenarnya. Anda hanya mungkin menggunakan JavaScript untuk ini.

kamu bisa memakai

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

di css

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

Jika Anda memiliki kendali atas HTML maka Anda dapat menambahkan elemen nyata daripada yang semu. : sebelum dan: setelah elemen semu dirender tepat setelah tag terbuka atau tepat sebelum tag penutup. Setara sebaris untuk css ini

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

Akan menjadi seperti ini:

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

Mengingat; Elemen "nyata" Anda sebelum dan sesudah dan apa pun dengan css sebaris akan sangat meningkatkan ukuran laman Anda dan mengabaikan pengoptimalan pemuatan laman yang dimungkinkan oleh css eksternal dan elemen pseudo.