Использование 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с помощью встроенного атрибута стиля; вы должны сделать это в таблице стилей.

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

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

Нет. Атрибут 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.

ты можешь использовать

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

в css

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

Если у вас есть контроль над 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 и псевдоэлементы.