ใช้ CSS: ก่อนและ: หลังจากองค์ประกอบหลอกด้วย CSS แบบอินไลน์?

ฉันสร้างลายเซ็นอีเมล HTML ด้วย CSS แบบอินไลน์ (เช่น CSS ในstyleคุณลักษณะ) และฉันอยากรู้ว่ามันเป็นไปได้ที่จะใช้:beforeและ:afterองค์ประกอบหลอก

ถ้าเป็นเช่นนั้นฉันจะใช้สิ่งนี้กับอินไลน์ CSS ได้อย่างไร

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

คุณไม่สามารถระบุรูปแบบอินไลน์สำหรับองค์ประกอบหลอก

นี่เป็นเพราะองค์ประกอบหลอกเช่นชั้นเรียนหลอก (ดูคำตอบของฉันกับคำถามอื่น ๆ นี้ ) กำหนดไว้ใน CSS โดยใช้ตัวเลือกเป็นตัวย่อของแผนผังเอกสารที่ไม่สามารถแสดงใน HTML ได้ styleในทางกลับกันแอตทริบิวต์inline ถูกระบุไว้ใน HTML สำหรับองค์ประกอบเฉพาะ

เนื่องจากรูปแบบอินไลน์สามารถเกิดขึ้นได้ใน HTML เท่านั้นจึงจะใช้กับองค์ประกอบ HTML ที่กำหนดไว้เท่านั้นและไม่รวมถึงองค์ประกอบแบบหลอกที่สร้างขึ้น

ความแตกต่างที่สำคัญระหว่างองค์ประกอบหลอกและคลาสหลอกในแง่มุมนี้คือคุณสมบัติที่สืบทอดมาโดยค่าเริ่มต้นจะได้รับการสืบทอดโดย:beforeและ:afterจากองค์ประกอบที่สร้างขึ้นในขณะที่สไตล์คลาสหลอกไม่ได้ใช้งานเลย ในกรณีของคุณตัวอย่างเช่นถ้าคุณวางtext-align: justifyในแอตทริบิวต์สไตล์แบบอินไลน์สำหรับองค์ประกอบก็จะได้รับการสืบทอดโดยtd td:afterข้อแม้คือคุณไม่สามารถประกาศtd:afterด้วยแอตทริบิวต์สไตล์อินไลน์ คุณต้องทำในสไตล์ชีท

ตามที่กล่าวไว้ข้างต้น: เป็นไปไม่ได้ที่จะเรียกใช้ css pseudo-class / -element inline สิ่งที่ฉันทำตอนนี้คือ: ให้องค์ประกอบของคุณเป็นตัวระบุที่ไม่ซ้ำกัน f.ex ID หรือคลาสที่ไม่ซ้ำกัน และเขียน<style>องค์ประกอบที่เหมาะสม

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

fugly แต่ 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>

ไม่มีคุณไม่สามารถกำหนดเป้าหมายคลาสหลอกหรือองค์ประกอบหลอกในอินไลน์ -ssss ตามที่ David Thomasกล่าว สำหรับรายละเอียดเพิ่มเติมดูคำตอบนี้โดยBoltClockเกี่ยวกับคลาส Pseudo

ไม่คุณสมบัติสไตล์จะกำหนดคุณสมบัติของสไตล์สำหรับองค์ประกอบ HTML ที่ระบุเท่านั้น Pseudo-classes เป็นสมาชิกของตระกูล selector ซึ่งไม่ได้เกิดขึ้นในคุณสมบัติ .....

นอกจากนี้เรายังสามารถเขียนใช้เหมือนกันสำหรับองค์ประกอบหลอก

ไม่คุณสมบัติสไตล์จะกำหนดคุณสมบัติของสไตล์สำหรับองค์ประกอบ HTML ที่ระบุเท่านั้น Pseudo-classes และ pseudo-elements ที่เป็นสมาชิกของตระกูล selector ซึ่งไม่ได้เกิดขึ้นในแอ็ตทริบิวต์ดังนั้นคุณจึงไม่สามารถสไตล์อินไลน์ได้

คุณไม่สามารถสร้างองค์ประกอบหลอกในอินไลน์ 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 คุณสามารถเพิ่มองค์ประกอบจริงแทนการหลอกได้ : ก่อนและ: หลังจากองค์ประกอบหลอกถูกเรนเดอร์หลังจากแท็กเปิดหรือขวาก่อนแท็กปิด อินไลน์เทียบเท่าสำหรับ 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>

โปรดจำไว้; "ของจริง" ของคุณก่อนและหลังองค์ประกอบและสิ่งใดก็ตามที่มี css แบบอินไลน์จะเพิ่มขนาดของหน้าเว็บของคุณอย่างมากและไม่สนใจการเพิ่มประสิทธิภาพการโหลดหน้าซึ่งองค์ประกอบ css และหลอกหลอกทำให้เป็นไปได้

คุณสามารถใช้ได้

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

ใน css

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