использование css: before и: after псевдоэлементов со встроенным css?

<p>я делаю подпись электронной почты в формате html с помощью встроенного css (то есть css в атрибутах <code>style</code>), и мне любопытно, можно ли использовать псевдо-элементы <code>:before</code> и <code>:after</code>.</p><p>если так, как бы я реализовал что-то подобное с помощью встроенного css?</p><pre><code>td { text-align: justify; } td:after { content: ""; display: inline-block; width: 100%; } </code></pre>

<p>вы не можете указать встроенные стили для псевдоэлементов.</p><p>это потому, что псевдоэлементы, такие как псевдоклассы (см. мой ответ на <a href="https://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles">этот другой вопрос</a> ), определены в css с использованием селекторов в качестве абстракций дерева документа, которые не могут быть выражены в html. с другой стороны, встроенный атрибут <code>style</code> указывается в html для конкретного элемента.</p><p>поскольку встроенные стили могут встречаться только в html, они будут применяться только к элементу html, для которого они определены, а не к любым псевдоэлементам, которые он генерирует.</p><p>кроме того, основное различие между псевдоэлементами и псевдоклассами в этом аспекте заключается в том, что свойства, которые наследуются по умолчанию <a href="http://www.w3.org/tr/css21/generate.html#before-after-content"><em> будут </em> наследуется</a> от <code>:before</code> и <code>:after</code> от генерирующего элемента, тогда как стили псевдоклассов просто не применяются вообще. например, в вашем случае, если вы поместите <code>text-align: justify</code> в атрибут встроенного стиля для элемента <code>td</code>, он будет унаследован от <code>td:after</code>. предостережение заключается в том, что вы не можете объявить <code>td:after</code> с атрибутом встроенного стиля; вы должны сделать это в таблице стилей.</p>

<p>как упомянуто выше: невозможно назвать псевдокласс/-элемент css встроенным. то, что я сейчас сделал, это: дать вашему элементу уникальный идентификатор, f.ex. идентификатор или уникальный класс. и напишите подходящий <code><style></code> элемент</p><pre><code><style>#id29:before { content: "*";}</style> <article id="id29"> <!-- something --> </article> </code></pre><p>fugly, но что встроенного css нет ..?</p>

<p>нет, вы не можете настроить таргетинг на <a href="http://css-tricks.com/pseudo-class-selectors/">псевдоклассы</a> или <a href="http://www.hongkiat.com/blog/pseudo-element-before-after/">псевдоэлементы</a> в inline-css как <strong> дэвид томас </strong> сказал. подробнее см. <a href="https://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles">this</a> ответ <strong> boltclock </strong> о <strong> псевдоклассах </strong></p><blockquote> <p>нет. атрибут style определяет только свойства стиля для данного элемента html. псевдоклассы являются членами семейства селекторов, которые не встречаются в атрибуте .....</p> </blockquote><p>мы также можем написать использовать то же самое для <strong> псевдоэлементов </strong></p><blockquote> <p>нет. атрибут style определяет только свойства стиля для данного элемента html. псевдоклассы и псевдоэлементы являются членами семейства селекторов, которые не встречаются в атрибуте, поэтому их нельзя встроить в стиль.</p> </blockquote>

<p>вы можете использовать данные в строке</p><pre><code> <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> </code></pre>

<p><strong>да, это возможно</strong>, просто добавьте встроенные стили для элемента, который вы добавляете после или до, пример</p><pre><code> <style> .horizontalprogress:after { width: 45%; } </style><!-- change value from here --> <div class="horizontalprogress"></div> </code></pre>

<p>если у вас есть контроль над html, вы можете добавить реальный элемент вместо псевдо-элемента. : before и: after псевдоэлементы отображаются сразу после открытого тега или прямо перед закрывающим тегом. встроенный эквивалент для этого css</p><pre><code>td { text-align: justify; } td:after { content: ""; display: inline-block; width: 100%; } </code></pre><p>было бы что-то вроде этого:</p><pre><code><table> <tr> <td style="text-align: justify;"> td content <span class="inline\_td\_after" style="display: inline-block; width: 100%;"></span> </td> </tr> </table> </code></pre><p>иметь ввиду; ваши "настоящие" элементы "до" и "после" и все, что связано с встроенным css, значительно увеличит размер ваших страниц и проигнорирует оптимизации загрузки страниц, которые делают возможными внешние css и псевдоэлементы.</p>