Использование CSS: до и: после псевдоэлементов со встроенным CSS?

Вы не можете указать встроенные стили для псевдоэлементов.

Это потому, что псевдоэлементы, такие как псевдоклассы (см. Мой ответ на этот другой вопрос), определены в CSS с использованием селекторов как абстракций дерева документа, которые не могут быть выражены в HTML. С другой стороны, встроенный атрибут style указывается в HTML для конкретного элемента.

Поскольку встроенные стили могут встречаться только в HTML, они будут применяться только к HTML-элементу, для которого они определены, а не к каким-либо псевдоэлементам, которые он генерирует.

В стороне, основное различие между псевдоэлементами и псевдоклассами в этом аспекте заключается в том, что свойства, которые наследуются по умолчанию будет унаследован :before и :after от генерирующего элемента, тогда как стили псевдокласса вообще не применяются. В вашем случае, например, если вы поместите text-align: justify во встроенный атрибут стиля для элемента td, он будет унаследован td:after. Предостережение: вы не можете объявить td:after с помощью встроенного атрибута стиля; вы должны сделать это в таблице стилей.

как упоминалось выше: невозможно вызвать встроенный псевдокласс / -элемент css. Теперь я сделал следующее: присвоил вашему элементу уникальный идентификатор, например, ex. идентификатор или уникальный класс. и напишите подходящий <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>

Нет, вы не можете настроить таргетинг на псевдоклассы или псевдоэлементы в inline-css, как сказал Дэвид Томас. Дополнительные сведения см. В этом ответе BoltClock о Псевдоклассы

Нет. Атрибут style определяет свойства стиля только для данного элемента HTML. Псевдоклассы являются членом семейства селекторов, которых нет в атрибуте .....

Мы также можем написать использование для псевдоэлементов

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

Вы не можете создавать псевдоэлементы во встроенном CSS.

Однако, если вы можете создать псевдоэлемент в таблице стилей, то есть способ стилизовать его встроенным, установив встроенный стиль для его родительского элемента, а затем используя ключевое слово inherit для стилизации псевдоэлемента, например:

<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, вы можете добавить реальный элемент вместо псевдонима. : before и: after псевдоэлементы отображаются сразу после открытого тега или прямо перед закрывающим тегом. Встроенный эквивалент этого 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);
}

Вы можете передать значения переменных в строку, а затем в своей таблице стилей использовать значение inherit для свойства псевдоэлемента, которым вы хотите управлять:

HTML

<div style="color: whitesmoke;">
</div>

CSS

div::before {
  content: '';
  color: inherit;
}

Полезно, например, для фоновых изображений.