疑似要素のcontentに、エスケープした文字を埋め込む方法

現在チャットの制作をしており、
ユーザの発言をDBに保存→保存した発言をHTMLに反映させる処理を書いています。

スタイルの都合により、一部の情報（ユーザー名など）を擬似要素で埋め込むようなコードにしているのですが、
その際、htmlspecialchar()で変換した文字コードがそのまま表示されてしまいます。
これをきちんと目的の文字に変換して表示する方法を教えて下さい。
(絵文字も表示させたいです）

#試したこと
擬似要素[::before]や[::after]にて特殊文字・機種依存文字を表示する方法
 PHP で全ての文字を数値の HTML エンティティーに変換する
この記事を参考にして、下記のようなコードを書いてみました。

PHP
1$result = mb_encode_numericentity( $str , [0x0,0xFFFF,0x0,0xFFFF] );
2$result = str_replace( '&','\',$result );
3$result = str_replace( '#','0',$result );
4$result = str_replace( 'x','0',$result );
5$result = str_replace( ';','',$result );

しかし、それをHTMLに表示させてみたところ、ぜんぜん違う文字に変換されてしまいました。
上記のコードをまともに動くようにするアドバイスでもいいですし、
違う方法でも、疑似要素にきちんと文字を表示できれば大丈夫です。

行動規範の内容に同意します

回答1件

ベストアンサー

CSSに直接書かず、HTML内にdata属性として記述してしまえば特に問題なくできませんか？（attr()を使用）

HTML
1<div data-t="&gt;">div</div>

CSS
1div::before {
2  content: attr(data-t);
3}
4```**動くサンプル：**[https://jsfiddle.net/fryLnadg/](https://jsfiddle.net/fryLnadg/)
5
6---
7
8【attr() - CSS: カスケーディングスタイルシート | MDN】
9[https://developer.mozilla.org/ja/docs/Web/CSS/attr](https://developer.mozilla.org/ja/docs/Web/CSS/attr)