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

Ответ 1

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

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

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

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

Ответ 2

как упоминалось выше: его невозможно вызвать псевдо-класс/-элемент css. что я теперь сделал: дать вашему элементу уникальный идентификатор, f.ex. id или уникальный класс. и напишите элемент <style> фитинга

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

fugly, но какой встроенный css isnt..?

Ответ 3

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

 <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>

Ответ 4

Нет, вы не можете указать псевдоклассы или псевдо- элементы в inline-css как David Thomas. Подробнее см. этот ответ BoltClock о Псевдоклассы

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

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

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

Ответ 5

Да, возможно,, просто добавьте встроенные стили для элемента, который вы добавляете после или раньше, Пример

 <style>
     .horizontalProgress:after { width: 45%; }
 </style><!-- Change Value from Here -->

 <div class="horizontalProgress"></div>

Ответ 6

Как упоминалось ранее, вы не можете использовать встроенные элементы для стилизации псевдоклассов. Псевдоклассы до и после являются состояниями элементов, а не фактическими элементами. Вы могли только возможно использовать JavaScript для этого.

Ответ 7

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

Ответ 8

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

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

<parent style="background-image:url(path/to/file); background-size:0px;"></p>

<style> 
   parent:before{
      content:'';
      background-image:inherit;
      (other)
   }
</style>

иногда это может быть удобно.