I'm having trouble understanding the behavior of the CSS :after property. According to the spec (here and here):
我无法理解CSS:after property的行为。根据说明书(这里和这里):
As their names indicate, the
:beforeand:afterpseudo-elements specify the location of content before and after an element's document tree content.正如它们的名称所示，伪元素后面的:before和:指定元素文档树内容前后内容的位置。
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?
这似乎并没有限制元素可以具有:after(或:before)属性。然而，它似乎只适用于特定的元素……
工作，
不， <输入> 不，
2 个解决方案
#1
134
img and input are both replaced elements.
img和输入都是替换的元素。
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
:beforeand:afterwith replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.请注意。此规范没有完全定义:before和:after替换元素(如HTML中的IMG)的交互。这将在以后的规范中更详细地定义。
With span:before, span:after, the DOM looks like this:
与span:before, span:after, DOM看起来是:
<span><before></before>Content of span<after></after></span>Evidently, that won't work with <img src="" />.
显然，这不适用于。
#2
8
:before and :after are not required to work for replaced elements, and CSS specifications do not specify how they would work for them, and the concept of replaced element is somewhat vague.
:before和:after并不需要用于替换元素，CSS规范也没有指定它们如何为替换元素工作，而且替换元素的概念有些模糊。
The CSS 2.1 specification clearly suggests that they can work for replaced elements, just saying that it does not “fully define” how. This relates to the issue that a replaced element is expected to have its own visual rendering, which is not controlled by CSS, whereas the pseudo-elements should add something to the content of the element. The spec adds that this will be defined “in more detail” in a future specification, but this has not taken place so far.
CSS 2.1规范明确指出，它们可以用于替换元素，只是说它没有“完全定义”如何替换。这涉及到这样一个问题，即被替换的元素应该有自己的视觉呈现，而不是由CSS控制的，而伪元素应该向元素的内容添加一些东西。规范补充说，这将在将来的规范中“更详细地”定义，但是到目前为止还没有实现。
Browser vendors just decided to avoid problems by not implementing these pseudo-elements for some elements at all.
浏览器厂商只是为了避免问题，根本没有为某些元素实现这些伪元素。
It is not clear at all what “replaced element” means, and the meaning appears to have changed somewhat. It is often interpreted as meaning the same as empty element (an element with EMPTY declared content, i.e. an element that cannot have any content), but CSS 2.1 itself shows a sample style sheet with the selector br:before (though browsers have ignored this, implementing br their own way). It can be argued that more and more elements have moved into the scope of CSS rendering, at least in part. For example, an input element (incuding its font, colors, etc.) is largely controllable with CSS in modern browsers.
完全不清楚“替换元素”是什么意思，它的意思似乎已经有所改变。它通常被解释为与空元素(一个声明为空的内容的元素，即一个不能有任何内容的元素)相同，但是CSS 2.1本身显示了一个带有选择器br:before的示例样式表(尽管浏览器已经忽略了这一点，以他们自己的方式实现了br)。可以说，越来越多的元素已经进入CSS渲染的范围，至少在一定程度上是如此。例如，输入元素(包括字体、颜色等)在现代浏览器中很大程度上可以通过CSS控制。
Current browsers (Firefox, IE, Chrome) do not seem to support the :after and :before pseudo-elements for empty elements other than hr. For hr, IE and Chrome place the generated content inside a bordered box, which is the implementation of hr; the content makes the box taller. Firefox places the content of both (!) pseudo-elements after the horizontal rule that is its implementation of hr. This variation illustrates the kinds of “interaction” problems that are referred to in CSS 2.1.
当前的浏览器(Firefox、IE、Chrome)似乎不支持:after和:before伪元素，而不是hr。对于hr, IE和Chrome将生成的内容放在一个边框框中，这是hr的实现;内容使盒子更高。Firefox将这两个伪元素的内容放在其hr实现的水平规则之后。这种变化说明了CSS 2.1中提到的“交互”问题的类型。
It is often claimed that these pseudo-elements cannot be used for empty elements since their HTML definitions do not allow any content. This is a category error. The syntax rules of a markup language do not restrict what you can do in CSS
通常声称这些伪元素不能用于空元素，因为它们的HTML定义不允许任何内容。这是一个类别错误。标记语言的语法规则不限制您在CSS中可以做什么
To conclude, :after and :before are currently not usable for empty elements (except marginally for hr), but this is mainly due to implementations and may change in the future.
综上所述，:after and:before目前不能用于空元素(除了少量的hr)，但这主要是由于实现的原因，将来可能会发生变化。
#1
134
img and input are both replaced elements.
img和输入都是替换的元素。
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
:beforeand:afterwith replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.请注意。此规范没有完全定义:before和:after替换元素(如HTML中的IMG)的交互。这将在以后的规范中更详细地定义。
With span:before, span:after, the DOM looks like this:
与span:before, span:after, DOM看起来是:
<span><before></before>Content of span<after></after></span>Evidently, that won't work with <img src="" />.
显然，这不适用于。
#2
8
:before and :after are not required to work for replaced elements, and CSS specifications do not specify how they would work for them, and the concept of replaced element is somewhat vague.
:before和:after并不需要用于替换元素，CSS规范也没有指定它们如何为替换元素工作，而且替换元素的概念有些模糊。
The CSS 2.1 specification clearly suggests that they can work for replaced elements, just saying that it does not “fully define” how. This relates to the issue that a replaced element is expected to have its own visual rendering, which is not controlled by CSS, whereas the pseudo-elements should add something to the content of the element. The spec adds that this will be defined “in more detail” in a future specification, but this has not taken place so far.
CSS 2.1规范明确指出，它们可以用于替换元素，只是说它没有“完全定义”如何替换。这涉及到这样一个问题，即被替换的元素应该有自己的视觉呈现，而不是由CSS控制的，而伪元素应该向元素的内容添加一些东西。规范补充说，这将在将来的规范中“更详细地”定义，但是到目前为止还没有实现。
Browser vendors just decided to avoid problems by not implementing these pseudo-elements for some elements at all.
浏览器厂商只是为了避免问题，根本没有为某些元素实现这些伪元素。
It is not clear at all what “replaced element” means, and the meaning appears to have changed somewhat. It is often interpreted as meaning the same as empty element (an element with EMPTY declared content, i.e. an element that cannot have any content), but CSS 2.1 itself shows a sample style sheet with the selector br:before (though browsers have ignored this, implementing br their own way). It can be argued that more and more elements have moved into the scope of CSS rendering, at least in part. For example, an input element (incuding its font, colors, etc.) is largely controllable with CSS in modern browsers.
完全不清楚“替换元素”是什么意思，它的意思似乎已经有所改变。它通常被解释为与空元素(一个声明为空的内容的元素，即一个不能有任何内容的元素)相同，但是CSS 2.1本身显示了一个带有选择器br:before的示例样式表(尽管浏览器已经忽略了这一点，以他们自己的方式实现了br)。可以说，越来越多的元素已经进入CSS渲染的范围，至少在一定程度上是如此。例如，输入元素(包括字体、颜色等)在现代浏览器中很大程度上可以通过CSS控制。
Current browsers (Firefox, IE, Chrome) do not seem to support the :after and :before pseudo-elements for empty elements other than hr. For hr, IE and Chrome place the generated content inside a bordered box, which is the implementation of hr; the content makes the box taller. Firefox places the content of both (!) pseudo-elements after the horizontal rule that is its implementation of hr. This variation illustrates the kinds of “interaction” problems that are referred to in CSS 2.1.
当前的浏览器(Firefox、IE、Chrome)似乎不支持:after和:before伪元素，而不是hr。对于hr, IE和Chrome将生成的内容放在一个边框框中，这是hr的实现;内容使盒子更高。Firefox将这两个伪元素的内容放在其hr实现的水平规则之后。这种变化说明了CSS 2.1中提到的“交互”问题的类型。
It is often claimed that these pseudo-elements cannot be used for empty elements since their HTML definitions do not allow any content. This is a category error. The syntax rules of a markup language do not restrict what you can do in CSS
通常声称这些伪元素不能用于空元素，因为它们的HTML定义不允许任何内容。这是一个类别错误。标记语言的语法规则不限制您在CSS中可以做什么
To conclude, :after and :before are currently not usable for empty elements (except marginally for hr), but this is mainly due to implementations and may change in the future.
综上所述，:after and:before目前不能用于空元素(除了少量的hr)，但这主要是由于实现的原因，将来可能会发生变化。