[英]Using CSS :before and :after pseudo-elements with inline CSS?
我正在使用内联 CSS(即style
属性中的 CSS)制作 HTML 电子邮件签名,我很好奇是否可以使用: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 伪类/元素是不可能的。 我现在所做的是:给你的元素一个唯一的标识符,f.ex。 一个 id 或一个唯一的类。 并编写一个合适的<style>
元素
<style>#id29:before { content: "*";}</style>
<article id="id29">
<!-- something -->
</article>
fugly,但什么内联 css 不是..?
您可以使用内联数据
<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>
您不能在内联 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>
如前所述,您不能使用内联元素为伪类设置样式。 伪类之前和之后是元素的状态,而不是实际元素。 您只能为此使用 JavaScript。
如果您可以控制 HTML,那么您可以添加一个真实元素而不是伪元素。 :before 和 :after 伪元素在 open 标签之后或 close 标签之前渲染。 此 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 和伪元素实现的页面加载优化。
编辑:如果您有权访问样式表,则可以内联传递变量值,然后在样式表中使用要操作的伪元素属性的inherit
值:
HTML
<div style="color: whitesmoke;">
</div>
CSS
div::before {
content: '';
color: inherit;
}
例如,对于背景图像很有用。
您可以使用
parent.style.setProperty("--padding-top", (height*100/width).toFixed(2)+"%");
在 CSS 中
el:after{
....
padding-top:var(--padding-top, 0px);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.