No Login Data Private Local Save

Emoji to CSS Content Code - Online ::before Pseudo Generator

Developer Tools Generator content CSS emoji pseudo
49
0
0
0
Emoji Input
You can also pick from the quick selection below
CSS ::before Code
No emoji entered
/* Your CSS code will appear here */
Copied!
FAQ – Emoji in CSS Content

Use the content property with the Unicode escape of the emoji, e.g., .element::before { content: "\1F600"; }. The tool above generates the correct escape sequences automatically.

Direct emoji characters work in modern browsers, but escapes ensure consistent rendering across all environments, avoid encoding issues, and are safer for older CSS parsers.

Both are valid. The leading zero (\01F600) follows the older CSS2 specification requiring at least four hex digits. Modern CSS3 accepts any number of hex digits, so \1F600 works fine. The tool lets you choose.

Emoji sequences (ZWJ, skin tones, flags) are converted to multiple Unicode escapes. Our tool processes every code point in the sequence, so you get a fully working CSS rule, e.g., content: "\1F468\200D\1F469\200D\1F467"; for the family emoji.

The standard escape format omits the trailing space for cleanliness, but you can easily add a space if needed (e.g., when placing multiple escapes without a separator). Our code is ready to use; simply paste it into your stylesheet.

All major modern browsers support emoji in ::before and ::after content. For very old versions (IE11 and earlier), fallback text may be needed, but escaping ensures widest compatibility.
🔧 Related Tools