テーブル行で疑似要素（：after、：before）を安全に使用することは可能ですか？

Question

絶対位置の要素をテーブル行の:after（:beforeの）として追加したいと思います。

そのような要素レンダリングエンジン（少なくともWebkitベース）を追加すると、それはある種のテーブルセルだと思います。

:beforeはすべてのブラウザでうまく機能しません。しかし：afterはFirefoxで非常にうまく機能し、Webkitではほとんどうまく機能します。 Webkitでは、小さなスペースを維持し、テーブル全体の幅を大きくします。

enter image description here -これがwebkitで気になることです。

これを修正する方法は？そして、なぜそれが起こっているのかについてどこで読むことができますか？

UPDATE 1

考えられる解決策：この行の最初のテーブルセルを、絶対配置された要素のホストとして使用します。

UPDATE 2

わかりました。最初の問題の解決策を見つけたと思います。そして、もっと良いものがあるかもしれないと思います。でもCSSを最大限使って作りたかったんです。問題は、静的テキストを編集可能にし、ユーザーが他の場所をクリックした場合は、この編集モードを閉じることです。

Marc Audet · Answer

この例では、::afterおよび::before疑似要素を使用して、テーブル行の前後にコンテンツを追加しています。これにより、基本的にテーブルレイアウトが破損し、予期しない結果が発生します。

生成されたコンテンツをテーブルセルに追加すると、結果の一貫性が高まります。

生成されたコンテンツの元の仕様を除いて、参照することはあまりありません。

さらに、CSSレンダリングエンジンはテーブルを作成するときに匿名ボックスを生成することに注意してください。

ただし、生成されたコンテンツはDOMの一部ではないため、テーブルレンダリングプロセス全体では、余分な疑似要素を適切な方法で処理できない可能性があります。

あなたは十分に指定されていない領域を掘り下げており、サポートはブラウザ固有になります。

レイアウト要件によっては、JavaScriptまたはjQueryを使用して、テーブルのDOMを目的の効果に変更する必要がある場合があります。