CSS：在不向某些元素添加内容之后
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6949148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS :after not adding content to certain elements
提问by eykanal
I'm having trouble understanding the behavior of the CSS :afterproperty. According to the spec (hereand here):
我无法理解 CSS:after属性的行为。根据规范（此处和此处）：
As their names indicate, the
:beforeand:afterpseudo-elements specify the location of content before and after an element's document tree content.
顾名思义
:before，:after伪元素和伪元素指定元素的文档树内容之前和之后的内容位置。
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 :beforeand :afterproperty?
这似乎没有限制哪些元素可以具有:after(或:before) 属性。然而，它似乎只适用于特定的元素......<p>工作，<img>不，<input>不，<table>不。我可以测试更多，但重点是。请注意，这在浏览器中似乎非常一致。是什么决定了一个对象是否可以接受 a:before和:after属性？
回答by thirtydot
imgand inputare both replaced elements.
img和input都是被替换的元素。
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.
替换元素是外观和尺寸由外部资源定义的任何元素。实例包括图像（
<img>标记），插件（<object>标签），和形式的元件（<button>，<textarea>，<input>，和<select>标签）。所有其他元素类型都可以称为非替换元素。
:beforeand :afteronly work with non-replaced elements.
:before并且:after只适用于非替换元素。
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.
笔记。本规范没有完全定义替换元素（例如 HTML 中的 IMG）的交互
:before和交互:after。这将在未来的规范中更详细地定义。
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="" />.
显然，这不适用于<img src="" />.
回答by Jukka K. Korpela
:beforeand :afterare not requiredto 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 suggeststhat they canwork 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 EMPTYdeclared content, i.e. an element that cannot have any content), but CSS 2.1 itself shows a sample style sheetwith the selector br:before(though browsers have ignored this, implementing brtheir 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 inputelement (incuding its font, colors, etc.) is largely controllable with CSS in modern browsers.
完全不清楚“替换元素”是什么意思，意思似乎发生了一些变化。它通常被解释为与空元素的含义相同（具有EMPTY声明内容的元素，即不能包含任何内容的元素），但 CSS 2.1 本身显示了带有选择器的示例样式表br:before（尽管浏览器忽略了这一点，实现br了自己的道路）。可以说越来越多的元素已经进入 CSS 渲染的范围，至少部分是这样。例如，input在现代浏览器中，一个元素（包括它的字体、颜色等）在很大程度上可以通过 CSS 进行控制。
Current browsers (Firefox, IE, Chrome) do not seem to support the :afterand :beforepseudo-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, :afterand :beforeare currently not usable for empty elements (except marginally for hr), but this is mainly due to implementations and may change in the future.
最后，:after与:before目前不为空元素可用（轻微除外hr），但是这主要是由于实现和在未来可能改变。
回答by Mattia Astorino
Elements that doesn't have closing tag are void elements and they can't display content inside them:
没有结束标记的元素是无效元素，它们不能在其中显示内容：
https://www.w3.org/TR/html5/syntax.html#void-elements
https://www.w3.org/TR/html5/syntax.html#void-elements
All Blink, Webkit and Quantum browsers allow you to create pseudo elements only on checkboxes but this is controversial since no spec allow this behavior.
所有 Blink、Webkit 和 Quantum 浏览器都允许您仅在复选框上创建伪元素，但这是有争议的，因为没有规范允许这种行为。
Here an example: https://codepen.io/equinusocio/pen/BOBaEM/
这里有一个例子：https: //codepen.io/equinusocio/pen/BOBaEM/
input[type="checkbox"] {
appearance: none;
color: #000;
width: 42px;
height: 24px;
border: 1px solid currentColor;
border-radius: 100px;
cursor: pointer;
transition: all 100ms;
background-size: 30%;
outline: none;
position: relative;
box-sizing: border-box;
background-color: #eee;
transition: background-color 200ms;
&::before {
content: '';
position: absolute;
left: 2px;
top: 2px;
bottom: 2px;
height: 18px;
width: 18px;
border-radius: 50%;
background-color: currentColor;
will-change: transform;
transition: transform 200ms cubic-bezier(.01,.65,.23,1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
&:checked {
background-color: aquamarine;
&::before {
transform: translateX(100%);
}
}
}
