jQueryでanimationがうまく動かない件

こんな感じで大雑把にanimationを設定していると

jQueryとバッティングしてしまい、期待通りの動きをしません。

jQueryでアニメーションをつける時は、cssのtransitionは干渉しないように要素を限定しておきましょう。
もしくはjQueryに任せて、cssでは書かないなどのルールを決めたほうがいいかもしれません。

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

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

となるが、この後に

を入れると

となる。

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

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

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

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

iphoneのサファリは自動的に文字サイズを拡大するという機能があります。
また、line-heightは文字サイズから高さ(行間)を計算します。
つまりiphoneでのline-heightはPC版よりも大きい数値になります。

これを防ぐには-webkit-text-size-adjustを指定します。

この一行を書いておけば安心でしょう。

cssで末尾を省略する時の注意点

はみ出した部分を三点リーダにする技がありますが、インライン要素には効かない事に注意です。

こういう時、

はダメです。
必ずブロック要素に掛けるようにしましょう。

もしくは、display:inline-block;としてもいいかもしれませんね。