after擬似要素が分裂する場合の対処方法

Pocket

after擬似要素の付いている要素にappendすると、afterが分裂します。
appendすると、appendした要素の後にafterがもう一度発生するためこのようなことが起こります。
(chromeで確認済み。他のブラウザでは未検証)

となるが、この後に

を入れると

となる。

回避方法は、上記の例だと

  • 最初のcssではafterを使わず、jsでspanを追加した後にafter擬似要素ではなく普通にspanかdiv要素にして追加する。
  • jsで一番最後にafter擬似要素をcssに追加。

辺りでしょうか。私は前者を使いました。

コメントを残す

メールアドレスが公開されることはありません。