ひよこwebプログラマーの覚え書き

エクセルとwebで効率化しますさせます

*

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

   

Pocket

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

となるが、この後に

を入れると

となる。

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

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

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

 - css, javascript, プログラム

Message

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

  関連記事

no image
PHPのデバッグについて。ディレクトリ編

思わぬところでハマりました。phpでfopenやtouchする場合のディレクトリ …

no image
google拡張機能を開発する その5 本編 manifest.json以外について

manifest.jsonさえ乗り越えれば後は簡単です。ざっと見て行きましょう。 …

Adobe_Illustrator_Icon_CS6-150x150
jQueryでselect要素、option要素の中からテキスト・文字列で選択する方法

例としてこんなselect要素、option要素があるとします。そして青森を選択 …

no image
google拡張機能を開発する その2 インストール編

解凍したフォルダの中身は icon.png jquery.js manifest …

no image
webプログラミング用のおすすめツール

フリー、有料、ともに星の数ほどあるツール。 人によって何がいいかはかなり差がある …

no image
google拡張機能を開発する その4 本編 manifest.jsonについて

本題です。manifest.json以外は次の項で説明します。 manifest …

css
iphoneで文字サイズがおかしい時。

iphoneのサファリは自動的に文字サイズを拡大するという機能があります。 また …

no image
jquery、jquery-mobileの.liveが使えない

jquery1.7で廃止されていました。 検索すると $(ページID).live …

no image
wordpressでファイル作成のtouch()を使った場合

$file_name = ‘./data.txt’; t …

no image
google拡張機能を開発する その3 改造編

「test」拡張機能をインストールできたら、どのタブでもいいのでリロードしてみて …