Використання CSS: до і після псевдоелементів з вбудованим CSS?

Я роблю HTML електронної підпис з інлайн CSS (тобто CSS в styleатрибутах), і я цікаво, чи буде це можна використовувати :beforeі :afterпсевдо-елементи.

Якщо так, то як би я реалізував щось подібне з вбудованим CSS?

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

Ви не можете вказати стилі вбудованих псевдоелементів.

Це тому, що псевдоелементи, як псевдокласи (див. Мою відповідь на це інше питання ), визначаються в CSS за допомогою селекторів як абстракції дерева документів, які не можуть бути виражені в HTML. З styleіншого боку, вбудований атрибут задається в HTML для певного елемента.

Оскільки вбудовані стилі можуть зустрічатися лише в HTML, вони застосовуватимуться лише до HTML-елемента, для якого вони визначені, а не до будь-яких створених ним псевдоелементів.

Як і в стороні, головна відмінність між псевдо-елементами і псевдо-класами в цьому аспекті є те , що властивості, які успадкували за замовчуванням будуть успадковуватися від :beforeі :afterвід породжує елемента, в той час як стилі псевдо-класу просто не застосовуються взагалі. Наприклад, якщо ви розміщуєте text-align: justifyв tdелементі атрибут стилю для елемента, він буде успадкований td:after. Застереження полягає в тому, що ви не можете оголосити td:afterатрибут стилю inline; ви повинні зробити це в таблиці стилів.

як було сказано вище: не можна викликати вбудований css псевдоклас / елемент. Що я зараз зробив, це: дати своєму елементу унікальний ідентифікатор, f.ex. ідентифікатор або унікальний клас. і написати підходящий <style>елемент

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

fugly, але що inline css isnt ..?

Ви можете використовувати дані 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>

Ні, ви не можете націлити на псевдокласи або псевдоелементи в inline-css, як сказав Девід Томас . Для отримання більш докладної інформації див цього відповіді на BoltClock про псевдо-класах

Ні. Атрибут стилю визначає лише властивості стилю для даного елемента HTML. Псевдокласи є членом сім'ї селекторів, які не зустрічаються в атрибуті .....

Ми також можемо написати те ж саме використання для псевдоелементів

Ні. Атрибут стилю визначає лише властивості стилю для даного елемента HTML. Псевдокласи та псевдоелементи є членом сімейства селекторів, які не зустрічаються в атрибуті, тому ви не можете їх стилі встроїти.

Ви не можете створити псевдоелементи в inline 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);
}