CSS 是否可以安全地在表行上使用伪元素 (:after, :before)？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19588674/
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
Is it possible to user pseudo-element (:after, :before) on table row safely?
提问by Aleksandr Motsjonov
I want to add absolutely positioned element as an :after(of :before) of a table row.
我想将绝对定位的元素添加为表格行的:after(of :before)。
Look at this http://jsbin.com/IGumoye/5/edit
看看这个http://jsbin.com/IGumoye/5/edit
I assume that when I add such element rendering engine (at least Webkit based) think it is a table cell of some kind.
我假设当我添加这样的元素渲染引擎（至少基于 Webkit）时，我认为它是某种表格单元。
:beforeworks badly in all browsers. But :after works very well in Firefox and almost good in webkit. In webkit it keep small space and makes whole table width bigger.
:before在所有浏览器中效果不佳。但是 :after 在 Firefox 中工作得很好，在 webkit 中几乎很好。在 webkit 中，它保持较小的空间并使整个表格宽度更大。
- This is what bothers me in webkit.
- 这就是 webkit 困扰我的地方。
How to fix this? And where can I read about why it happening?
如何解决这个问题？我在哪里可以读到它为什么会发生？
UPDATE 1
更新 1
Possible solution: Use first table cell in this row as a host for absolutely positioned element.
可能的解决方案：使用该行中的第一个表格单元格作为绝对定位元素的宿主。
http://jsbin.com/IGumoye/10/edit
http://jsbin.com/IGumoye/10/edit
UPDATE 2
更新 2
Ok, I think I found solution for my initial problem. And I assume there are might be better one. But I wanted to make using CSS by maximum. Problem is - make some static text editable and if user clicks anywhere else - close this edit mode.
好的，我想我找到了解决最初问题的方法。我认为可能有更好的。但我想最大限度地使用 CSS。问题是 - 使一些静态文本可编辑，如果用户点击其他任何地方 - 关闭此编辑模式。
回答by Marc Audet
In this example, you are using the ::afterand ::beforepseudo-elements to add content after or before a table row, which essentially will break the table layout and lead to unpredictable results.
在此示例中，您使用::after和::before伪元素在表格行之后或之前添加内容，这实际上会破坏表格布局并导致不可预测的结果。
If you were to add the generated content to a table-cell, the results would be more consistent.
如果将生成的内容添加到表格单元格中，结果会更加一致。
There is not much to refer to except the original specification for generated content:
除了生成内容的原始规范外，没有太多可参考的：
http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content
http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content
In addition, keep in mind that the CSS rendering engine generates anonymous boxes when creating tables:
此外，请记住 CSS 渲染引擎在创建表格时会生成匿名框：
http://www.w3.org/TR/2009/CR-CSS2-20090908/tables.html#anonymous-boxes
http://www.w3.org/TR/2009/CR-CSS2-20090908/tables.html#anonymous-boxes
However, since generated content is not part of the DOM, the whole table-rendering process probably cannot deal with the extra pseudo-element in a sensible way.
然而，由于生成的内容不是 DOM 的一部分，整个表格渲染过程可能无法以合理的方式处理额外的伪元素。
You are delving into an area that is not well specified and any support will be browser specific.
您正在深入研究一个没有明确规定的领域，任何支持都将是特定于浏览器的。
Depending on your layout requirements, you might need to use JavaScript or jQuery to alter the DOM of the table to the desired effect.
根据您的布局要求，您可能需要使用 JavaScript 或 jQuery 将表格的 DOM 更改为所需的效果。
