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


146

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%; }

8
Anda tidak dapat menggunakan gaya sebaris untuk menargetkan pseudo-class atau pseudo-elemen.
David mengatakan mengembalikan Monica

2
kemungkinan duplikat dari CSS Pseudo-class dengan gaya inline
Champ

2
@Champ: Bukan pertanyaan yang sama, karena pseudo-element dan pseudo-class bukanlah hal yang sama. Saya menulis jawaban saya sendiri di sini untuk menjelaskan.
BoltClock

Jawaban:


124

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.


37

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


6
itu bukan CSS sebaris. CSS sebaris membutuhkan atribut style = "" untuk diteruskan ke elemen HTML individu. Biasanya diperlukan untuk mengirim CSS yang diformat ke Gmail, yang menghapus apa pun di tag <style>. Lihat di sini ( zurb.com/ink/inliner.php ) untuk automator
kez

Saya pikir ini adalah cara terdekat yang bisa Anda dapatkan dengan pseudo-elemen sebaris. Lebih baik lagi, gunakan baru scopedgaya dan :rootpseudo-kelas (ini begitu dingin): <article><style scoped>:root:before { content: "*";}</style><!-- something --></article>.
Ben J

3
Koreksi: Gunakan kelas :scopesemu:<article><style scoped>:scope:before { content: "*";}</style><!-- something --></article>
Ben J

1
Hal ini sangat baru, mungkin belum diimplementasikan, dan mungkin akan berubah. Ini ada dalam spesifikasi HTMLscope saat ini ( gaya d) dan Spesifikasi CSS ( :scope) . Saya seharusnya lebih jelas.
Ben J

Menggunakan tag <style> ... </style> disebut CSS internal atau tertanam, BUKAN CSS sebaris.
James Anderson Jr.

15

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>

2
Ini mencetak data-contentatribut sebagai contentpseudo-element. Ini tidak ada hubungannya dengan membuat elemen semu dengan CSS sebaris.
Nils Kaspersson

4
Saya datang ke sini mencari cara menerapkan pseudo selector di inline CSS dan jawaban ini menunjukkan kepada saya cara lain untuk mencapai hal yang sama. Konten harus didasarkan pada sejumlah besar kemungkinan opsi yang dibuat secara dinamis sehingga tidak praktis untuk menulis tumpukan pemilih CSS terpisah untuk setiap kemungkinan hasil.
wunth

5
Ini sebenarnya adalah jawaban yang sangat bagus untuk seseorang yang ingin menambahkan konten dinamis ke konten setelahnya. Mungkin tidak terkait dengan masalah ini, tetapi pertanyaan ini ditampilkan saat mencari solusi ini melalui Google.
Aleks


Ini terlihat bagus. Sayangnya, tampaknya ini tidak berfungsi untuk menyetel url.
tcurdt

8

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.


Lihat jawaban saya dan komentar saya atas pertanyaan itu.
BoltClock

ya tidak sama. tapi alasan dibalik itu tidak bisa digunakan sebaris sama kan?
Juara

Jawabannya serupa, tetapi pertanyaannya sangat berbeda.
BoltClock

7

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.


5

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>

22
Ini adalah lembar gaya sebaris. Bukan css sebaris.
Esger

4
Selain fakta bahwa ini tidak menyelesaikan pertanyaan yang sebenarnya, kode ini salah, ::afterdan ::beforepseudo-elemen memerlukan content: valuedefault content:noneyang pada dasarnya tidak menghasilkan apa-apa.
zer00ne

Menggunakan tag <style> ... </style> disebut CSS internal atau tertanam, BUKAN CSS sebaris.
James Anderson Jr.

1

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.


Mereka adalah elemen semu yang bukan negara.
pengguna4642212

1

kamu bisa memakai

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

di css

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

0

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.