(Special) character entity reference

Special characters are encoded in many different ways, depending how you want to display them. Using plain html, or as CSS in pseudo content (::before or ::after).
Here’s a quick list from CSS Tricks. (I only added the euro, “, &, > and < characters). You can find another useful overview on W3.org.

Name NumericDescriptionHexISO in CSS contentOctal
&nbsp; &#160;no-break space%A0::before { content:”\00a0″; }alert(“\240”);
&iexcl;¡&#161;inverted exclamation mark%A1::before { content:”\00a1″; }alert(“\241”);
&cent;¢&#162;cent sign%A2::before { content:”\00a2″; }alert(“\242”);
&pound;£&#163;pound sterling sign%A3::before { content:”\00a3″; }alert(“\243”);
&curren;¤&#164;general currency sign%A4::before { content:”\00a4″; }alert(“\244”);
&yen;¥&#165;yen sign%A5::before { content:”\00a5″; }alert(“\245”);
&brvbar;¦&#166;broken (vertical) bar%A6::before { content:”\00a6″; }alert(“\246”);
&sect;§&#167;section sign%A7::before { content:”\00a7″; }alert(“\247”);
&uml;¨&#168;umlaut (dieresis)%A8::before { content:”\00a8″; }alert(“\250”);
&copy;©&#169;copyright sign%A9::before { content:”\00a9″; }alert(“\251”);
&ordf;ª&#170;ordinal indicator, feminine%AA::before { content:”\00aa”; }alert(“\252”);
&laquo;«&#171;angle quotation mark, left%AB::before { content:”\00ab”; }alert(“\253”);
&not;¬&#172;not sign%AC::before { content:”\00ac”; }alert(“\254”);
&shy;­&#173;soft hyphen%AD::before { content:”\00ad”; }alert(“\255”);
&reg;®&#174;registered sign%AE::before { content:”\00ae”; }alert(“\256”);
&macr;¯&#175;macron%AF::before { content:”\00af”; }alert(“\257”);
&deg;°&#176;degree sign%B0::before { content:”\00b0″; }alert(“\260”);
&plusmn;±&#177;plus-or-minus sign%B1::before { content:”\00b1″; }alert(“\261”);
&sup2;²&#178;superscript two%B2::before { content:”\00b2″; }alert(“\262”);
&sup3;³&#179;superscript three%B3::before { content:”\00b3″; }alert(“\263”);
&acute;´&#180;acute accent%B4::before { content:”\00b4″; }alert(“\264”);
&micro;µ&#181;micro sign%B5::before { content:”\00b5″; }alert(“\265”);
&para;&#182;pilcrow (paragraph sign)%B6::before { content:”\00b6″; }alert(“\266”);
&middot;·&#183;middle dot%B7::before { content:”\00b7″; }alert(“\267”);
&cedil;¸&#184;cedilla%B8::before { content:”\00b8″; }alert(“\270”);
&sup1;¹&#185;superscript one%B9::before { content:”\00b9″; }alert(“\271”);
&ordm;º&#186;ordinal indicator, masculine%BA::before { content:”\00ba”; }alert(“\272”);
&raquo;»&#187;angle quotation mark, right%BB::before { content:”\00bb”; }alert(“\273”);
&frac14;¼&#188;fraction one-quarter%BC::before { content:”\00bc”; }alert(“\274”);
&frac12;½&#189;fraction one-half%BD::before { content:”\00bd”; }alert(“\275”);
&frac34;¾&#190;fraction three-quarters%BE::before { content:”\00be”; }alert(“\276”);
&iquest;¿&#191;inverted question mark%BF::before { content:”\00bf”; }alert(“\277”);
&Agrave;À&#192;capital A, grave accent%C0::before { content:”\00c0″; }alert(“\300”);
&Aacute;Á&#193;capital A, acute accent%C1::before { content:”\00c1″; }alert(“\301”);
&Acirc;Â&#194;capital A, circumflex accent%C2::before { content:”\00c2″; }alert(“\302”);
&Atilde;Ã&#195;capital A, tilde%C3::before { content:”\00c3″; }alert(“\303”);
&Auml;Ä&#196;capital A, dieresis or umlaut mark%C4::before { content:”\00c4″; }alert(“\304”);
&Aring;Å&#197;capital A, ring%C5::before { content:”\00c5″; }alert(“\305”);
&AElig;Æ&#198;capital AE diphthong (ligature)%C6::before { content:”\00c6″; }alert(“\306”);
&Ccedil;Ç&#199;capital C, cedilla%C7::before { content:”\00c7″; }alert(“\307”);
&Egrave;È&#200;capital E, grave accent%C8::before { content:”\00c8″; }alert(“\310”);
&Eacute;É&#201;capital E, acute accent%C9::before { content:”\00c9″; }alert(“\311”);
&Ecirc;Ê&#202;capital E, circumflex accent%CA::before { content:”\00ca”; }alert(“\312”);
&Euml;Ë&#203;capital E, dieresis or umlaut mark%CB::before { content:”\00cb”; }alert(“\313”);
&Igrave;Ì&#204;capital I, grave accent%CC::before { content:”\00cc”; }alert(“\314”);
&Iacute;Í&#205;capital I, acute accent%CD::before { content:”\00cd”; }alert(“\315”);
&Icirc;Î&#206;capital I, circumflex accent%CE::before { content:”\00ce”; }alert(“\316”);
&Iuml;Ï&#207;capital I, dieresis or umlaut mark%CF::before { content:”\00cf”; }alert(“\317”);
&ETH;Ð&#208;capital Eth, Icelandic%D0::before { content:”\00d0″; }alert(“\320”);
&Ntilde;Ñ&#209;capital N, tilde%D1::before { content:”\00d1″; }alert(“\321”);
&Ograve;Ò&#210;capital O, grave accent%D2::before { content:”\00d2″; }alert(“\322”);
&Oacute;Ó&#211;capital O, acute accent%D3::before { content:”\00d3″; }alert(“\323”);
&Ocirc;Ô&#212;capital O, circumflex accent%D4::before { content:”\00d4″; }alert(“\324”);
&Otilde;Õ&#213;capital O, tilde%D5::before { content:”\00d5″; }alert(“\325”);
&Ouml;Ö&#214;capital O, dieresis or umlaut mark%D6::before { content:”\00d6″; }alert(“\326”);
&times;×&#215;multiply sign%D7::before { content:”\00d7″; }alert(“\327”);
&Oslash;Ø&#216;

capital O, slash

%D8::before { content:”\00d8″; }alert(“\330”);
&Ugrave;Ù&#217;capital U, grave accent%D9::before { content:”\00d9″; }alert(“\331”);
&Uacute;Ú&#218;capital U, acute accent%DA::before { content:”\00da”; }alert(“\332”);
&Ucirc;Û&#219;capital U, circumflex accent%DB::before { content:”\00db”; }alert(“\333”);
&Uuml;Ü&#220;capital U, dieresis or umlaut mark%DC::before { content:”\00dc”; }alert(“\334”);
&Yacute;Ý&#221;capital Y, acute accent%DD::before { content:”\00dd”; }alert(“\335”);
&THORN;Þ&#222;capital THORN, Icelandic%DE::before { content:”\00de”; }alert(“\336”);
&szlig;ß&#223;small sharp s, German (sz ligature)%DF::before { content:”\00df”; }alert(“\337”);
&agrave;à&#224;small a, grave accent%E0::before { content:”\00e0″; }alert(“\340”);
&aacute;á&#225;small a, acute accent%E1::before { content:”\00e1″; }alert(“\341”);
&acirc;â&#226;small a, circumflex accent%E2::before { content:”\00e2″; }alert(“\342”);
&atilde;ã&#227;small a, tilde%E3::before { content:”\00e3″; }alert(“\343”);
&auml;ä&#228;small a, dieresis or umlaut mark%E4::before { content:”\00e4″; }alert(“\344”);
&aring;å&#229;small a, ring%E5::before { content:”\00e5″; }alert(“\345”);
&aelig;æ&#230;small ae diphthong (ligature)%E6::before { content:”\00e6″; }alert(“\346”);
&ccedil;ç&#231;small c, cedilla%E7::before { content:”\00e7″; }alert(“\347”);
&egrave;è&#232;small e, grave accent%E8::before { content:”\00e8″; }alert(“\350”);
&eacute;é&#233;small e, acute accent%E9::before { content:”\00e9″; }alert(“\351”);
&ecirc;ê&#234;small e, circumflex accent%EA::before { content:”\00ea”; }alert(“\352”);
&euml;ë&#235;small e, dieresis or umlaut mark%EB::before { content:”\00eb”; }alert(“\353”);
&igrave;ì&#236;small i, grave accent%EC::before { content:”\00ec”; }alert(“\354”);
&iacute;í&#237;small i, acute accent%ED::before { content:”\00ed”; }alert(“\355”);
&icirc;î&#238;small i, circumflex accent%EE::before { content:”\00ee”; }alert(“\356”);
&iuml;ï&#239;small i, dieresis or umlaut mark%EF::before { content:”\00ef”; }alert(“\357”);
&eth;ð&#240;small eth, Icelandic%F0::before { content:”\00f0″; }alert(“\360”);
&ntilde;ñ&#241;small n, tilde%F1::before { content:”\00f1″; }alert(“\361”);
&ograve;ò&#242;small o, grave accent%F2::before { content:”\00f2″; }alert(“\362”);
&oacute;ó&#243;small o, acute accent%F3::before { content:”\00f3″; }alert(“\363”);
&ocirc;ô&#244;small o, circumflex accent%F4::before { content:”\00f4″; }alert(“\364”);
&otilde;õ&#245;small o, tilde%F5::before { content:”\00f5″; }alert(“\365”);
&ouml;ö&#246;small o, dieresis or umlaut mark%F6::before { content:”\00f6″; }alert(“\366”);
&divide;÷&#247;divide sign%F7::before { content:”\00f7″; }alert(“\367”);
&oslash;ø&#248;small o, slash%F8::before { content:”\00f8″; }alert(“\370”);
&ugrave;ù&#249;small u, grave accent%F9::before { content:”\00f9″; }alert(“\371”);
&uacute;ú&#250;small u, acute accent%FA::before { content:”\00fa”; }alert(“\372”);
&ucirc;û&#251;small u, circumflex accent%FB::before { content:”\00fb”; }alert(“\373”);
&uuml;ü&#252;small u, dieresis or umlaut mark%FC::before { content:”\00fc”; }alert(“\374”);
&yacute;ý&#253;small y, acute accent%FD::before { content:”\00fd”; }alert(“\375”);
&thorn;þ&#254;small thorn, Icelandic%FE::before { content:”\00fe”; }alert(“\376”);
&yuml;ÿ&#255;small y, dieresis or umlaut mark%FF::before { content:”\00ff”; }alert(“\377”);
&euro;&#8364;euro currency sign ::before { content:”\20ac”; }alert(“\u20AC”);
&lt;<&#060;less than sign ::before { content:”\003c”; }alert(“\74”);
&gt;>&#062;greater than sign ::before { content:”\003e”; }alert(“\76”);
&quot;"&#034;double quote ::before { content:”\0022″; }alert(“\42”);
&amp;&&#038;ampersand ::before { content:”\0026″; }alert(“\46”);

Leave a Reply