CSS：在不向某些元素添加内容之后 [英] CSS :after not adding content to certain elements

问题描述

我无法理解CSS ：after 属性的行为。根据规范（此处和在这里）：

正如他们的名字所示，：before 和：之后伪元素指定元素前后的内容位置文档树内容。

这似乎没有限制哪些元素可以有：after （或：before ）属性。但是，它似乎只适用于特定元素 ... < p> 工作，< img> 不，< input> 不，< table> 。我可以测试更多，但要点是。注意，这看起来在不同的浏览器是非常一致的。 决定对象是否可以接受：之前和：之后的属性？ p>

解决方案

img 和输入都替换元素。

替换的元素是外部资源定义的外观和尺寸为
的任何元素。示例包括图像（< img> 标记），
插件（< object> 标记）和形式元素（< button> ，< textarea> ，
< input> 和< select> 标签）。所有其他元素类型可以引用
为未替换的元素。

：

规范：

注意。本规范没有完全定义
：之前的和：替换元素之后的 HTML中的IMG）。

使用 span：before， span：after 后，DOM如下所示：

 < span>< before> ; / before> span的内容< after>< / after>< / span> 
  

显然，这不能使用< img src = /> 。

I'm having trouble understanding the behavior of the CSS :after property. According to the spec (here and here):

As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.

This doesn't seem to place restrictions on which elements can have a :after (or :before) property. However, it seems to only work with specific elements... <p> works, <img> doesn't, <input> doesn't, <table> does. I'm could test more, but the point is made. Note that this seems pretty consistent across browsers. What determines whether an object can accept a :before and :after property?

解决方案

img and input are both replaced elements.

A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images (<img> tags), plugins (<object> tags), and form elements (<button>, <textarea>, <input>, and <select> tags). All other elements types can be referred to as non-replaced elements.

:before and :after only work with non-replaced elements.

From the spec:

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

With span:before, span:after, the DOM looks like this:

<span><before></before>Content of span<after></after></span>

Evidently, that won't work with <img src="" />.

这篇关于CSS：在不向某些元素添加内容之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！