it-swarm.com.ru

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

Я делаю подпись электронной почты в формате HTML с помощью встроенного CSS (то есть CSS в атрибутах style), и мне любопытно, можно ли использовать псевдо-элементы :before и :after.

Если так, как бы я реализовал что-то подобное с помощью встроенного CSS?

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

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

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

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

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

101
BoltClock

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

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

fugly, но что встроенного CSS нет ..?

33
honk31

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

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

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

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

7
Champ

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

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

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

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

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

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

0
Nesha Zoric

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

0
txyoji