Использование CSS: до и: после псевдоэлементов с встроенным CSS?
Я создаю подпись электронной почты HTML с встроенным CSS (т.е. CSS в атрибутах style
), и мне любопытно, можно ли использовать псевдоэлементы :before
и :after
.
Если да, то как мне реализовать что-то подобное с встроенным CSS?
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
Ответы
Ответ 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>
иногда это может быть удобно.