できないシリーズ

input要素に:before,:afterは使えない

p要素の例

p要素に:beforeと:afterを指定

input要素の例

button要素の例

<input type="button">を擬似要素で装飾したくなった、などというシチュエーションの場合はbutton要素に変更しましょう。

inputの他にも、終了タグが存在しない種類の要素は基本的に:beforeや:afterといった擬似要素は無効なようです(img、brなど)。

background-imageはアニメーション無効

失敗例
文字色と背景にアニメーションを指定→文字色のみ有効となってしまう
※Google Chromeだと背景画像もアニメーションするようなのでChrome以外のブラウザでご確認ください。(現状のW3Cの仕様的にはChrome以外のブラウザの動作が正常みたいです)

ホバーすると文字色の変更と同様に
ゆっくりとbackground-imageが変わる…
ようにしたいボタン

対処例
imgタグで2つの画像を予め表示しておき、hover時と非hover時で2枚の画像の透過率(opacity)をアニメーションさせた

ホバーすると文字色の変更と同様に
ゆっくりと画像部分が変わる…
ようにしたボタン

これに載っているCSSプロパティはアニメーション(transitionやanimation)が効かないので注意。アニメーションが動かないなと思ったらリストに該当のプロパティ名が載っているかチェックしましょう。

display: inline-blockで横並べにすると半角スペースの余白ができる


項目間に意図しない半角スペースが発生している

項目
項目
項目

解決例1
inline-blockにした要素と要素の間をコメントアウトする。CSSを触ることすら面倒な場合のハック的対処法

項目
項目
項目

解決例2
flexを使う

項目
項目
項目

単純に横並べにしたいだけの時は問答無用でflexを使いましょう。Flexboxレイアウトの場合、項目数が多いと自動で折り返しになるinline-blockと違ってflex-wrap: wrapを指定しないと折り返しされないのでそこだけ注意。昔のIEを考慮しなければならない場合はfloatで頑張ってください。

親要素にdisplay: tableを指定して横並べにする該当要素にdisplay: table-cellにする方法もありますが、見かけ上または文書構造上テーブルのような見た目にしない場合、個人的にはdisplayプロパティにtableを指定することをオススメしないです。オススメしない理由はいろいろです。

親要素のletter-spacingを-0.4pxぐらいにしてinline-blockにする要素の方をletter-spacing: 0にする、同様の考え方で親要素だけfont-size: 0にしてしまうなどの方法もありますがブラウザによってフォントの解釈が変わったりと良くないことが起こる可能性が高い上に面倒なので考慮しません。