疑似要素で :before, :after に content を設定した時に、空白文字が勝手に消去されていた問題と戦っていました。

ややこしかったのは、開発環境ではこの問題は起っていなかったという所です。
本番だけおかしくなっており、テスト環境では普通だったので、受信したコードと、開発環境のコードの差を調べました。

調査

僕は gulp で SCSS ファイルを管理しているのですが、面倒臭いという理由で、minify は WordPress のプラグインに任せています (そもそもこれが良くなかった)。

sass によって生成された style.css では空白文字は健在しており、ブラウザで確認するも問題無く望み道理の動作をしていました。

そして、本番環境の適応されている該当コードを見ると、空白文字は見事削除されていました。

良く良く調べると、WordPress のプラグインによって minify がかかった時に、勝手に削除されてたので、文字列の中身の空白文字も誤認識でふっとばしている事が分かりました。

sass コンパイル時に出てくるコードはこんな感じです。

h3:before {
  content: " ;; ";
}

minify すると、上記のコードがこの様になってたんですよね。

h3:before { content: " ;;"; }

この問題は望ましく無さすぎるので、解消するべく空白文字を別文字にて表現する方式を探しました。

そこで、UnicodeのU+0020とU+00A0( )は別物である という記事を見付けました。

Unicode で書くといけるとの事でした。
対処後はこんな感じです。

h3:before {
  content: "\0020;;\0020";
}

結局 “\0020” で問題無く実行出来ましたって話です。

WordPress のプラグインは (一時的にサボれるし) 便利ですが、ツケを払わされる事もあるので、自分で対処が簡単な事まで他人を頼るべきでは無いと痛感しました。

後で脱 minify プラグインします。