Я делаю 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 не ..?
источник
scopedстили и:rootпсевдо-класс (это так здорово)<article><style scoped>:root:before { content: "*";}</style><!-- something --></article>.:scopeпсевдокласс:<article><style scoped>:scope:before { content: "*";}</style><!-- something --></article>scopeстили d) и спецификации CSS (:scope) . Я должен был быть более ясным.Вы можете использовать данные во встроенном
<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>источник
data-contentатрибут какcontentдля псевдоэлемента. Это не имеет ничего общего с созданием псевдоэлементов с помощью встроенного CSS.Нет, вы не можете настроить таргетинг на псевдоклассы или псевдоэлементы в inline-css, как сказал Дэвид Томас . Для получения более подробной информации см этого ответа на BoltClock о псевдо-классах
Мы также можем написать use то же самое для псевдоэлементов
источник
Вы не можете создавать псевдоэлементы во встроенном 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>источник
::afterи::beforeпсевдоэлементы нуждаются вcontent: valueзначении, иначе он принимает значения по умолчанию,content:noneчто практически ни к чему не приводит.Как упоминалось ранее, вы не можете использовать встроенные элементы для стилизации псевдоклассов . Псевдоклассы до и после - это состояния элементов, а не фактические элементы. Для этого можно использовать только 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 и псевдоэлементы.
источник