Javascript, CSS, and (X)HTML entities

Have you ever tried to use html entities in CSS? It just doesn’t work.

With the super table below you can find the reference to those entities.

Have fun ! ;)

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

capital O, slash

%D8 p:before p:before { content:”\00d8″; } alert(“\330″);
&Ugrave; Ù &#217; capital U, grave accent %D9 p:before p:before { content:”\00d9″; } alert(“\331″);
&Uacute; Ú &#218; capital U, acute accent %DA p:before p:before { content:”\00da”; } alert(“\332″);
&Ucirc; Û &#219; capital U, circumflex accent %DB p:before p:before { content:”\00db”; } alert(“\333″);
&Uuml; Ü &#220; capital U, dieresis or umlaut mark %DC p:before p:before { content:”\00dc”; } alert(“\334″);
&Yacute; Ý &#221; capital Y, acute accent %DD p:before p:before { content:”\00dd”; } alert(“\335″);
&THORN; Þ &#222; capital THORN, Icelandic %DE p:before p:before { content:”\00de”; } alert(“\336″);
&szlig; ß &#223; small sharp s, German (sz ligature) %DF p:before p:before { content:”\00df”; } alert(“\337″);
&agrave; à &#224; small a, grave accent %E0 p:before p:before { content:”\00e0″; } alert(“\340″);
&aacute; á &#225; small a, acute accent %E1 p:before p:before { content:”\00e1″; } alert(“\341″);
&acirc; â &#226; small a, circumflex accent %E2 p:before p:before { content:”\00e2″; } alert(“\342″);
&atilde; ã &#227; small a, tilde %E3 p:before p:before { content:”\00e3″; } alert(“\343″);
&auml; ä &#228; small a, dieresis or umlaut mark %E4 p:before p:before { content:”\00e4″; } alert(“\344″);
&aring; å &#229; small a, ring %E5 p:before p:before { content:”\00e5″; } alert(“\345″);
&aelig; æ &#230; small ae diphthong (ligature) %E6 p:before p:before { content:”\00e6″; } alert(“\346″);
&ccedil; ç &#231; small c, cedilla %E7 p:before p:before { content:”\00e7″; } alert(“\347″);
&egrave; è &#232; small e, grave accent %E8 p:before p:before { content:”\00e8″; } alert(“\350″);
&eacute; é &#233; small e, acute accent %E9 p:before p:before { content:”\00e9″; } alert(“\351″);
&ecirc; ê &#234; small e, circumflex accent %EA p:before p:before { content:”\00ea”; } alert(“\352″);
&euml; ë &#235; small e, dieresis or umlaut mark %EB p:before p:before { content:”\00eb”; } alert(“\353″);
&igrave; ì &#236; small i, grave accent %EC p:before p:before { content:”\00ec”; } alert(“\354″);
&iacute; í &#237; small i, acute accent %ED p:before p:before { content:”\00ed”; } alert(“\355″);
&icirc; î &#238; small i, circumflex accent %EE p:before p:before { content:”\00ee”; } alert(“\356″);
&iuml; ï &#239; small i, dieresis or umlaut mark %EF p:before p:before { content:”\00ef”; } alert(“\357″);
&eth; ð &#240; small eth, Icelandic %F0 p:before p:before { content:”\00f0″; } alert(“\360″);
&ntilde; ñ &#241; small n, tilde %F1 p:before p:before { content:”\00f1″; } alert(“\361″);
&ograve; ò &#242; small o, grave accent %F2 p:before p:before { content:”\00f2″; } alert(“\362″);
&oacute; ó &#243; small o, acute accent %F3 p:before p:before { content:”\00f3″; } alert(“\363″);
&ocirc; ô &#244; small o, circumflex accent %F4 p:before p:before { content:”\00f4″; } alert(“\364″);
&otilde; õ &#245; small o, tilde %F5 p:before p:before { content:”\00f5″; } alert(“\365″);
&ouml; ö &#246; small o, dieresis or umlaut mark %F6 p:before p:before { content:”\00f6″; } alert(“\366″);
&divide; ÷ &#247; divide sign %F7 p:before p:before { content:”\00f7″; } alert(“\367″);
&oslash; ø &#248; small o, slash %F8 p:before p:before { content:”\00f8″; } alert(“\370″);
&ugrave; ù &#249; small u, grave accent %F9 p:before p:before { content:”\00f9″; } alert(“\371″);
&uacute; ú &#250; small u, acute accent %FA p:before p:before { content:”\00fa”; } alert(“\372″);
&ucirc; û &#251; small u, circumflex accent %FB p:before p:before { content:”\00fb”; } alert(“\373″);
&uuml; ü &#252; small u, dieresis or umlaut mark %FC p:before p:before { content:”\00fc”; } alert(“\374″);
&yacute; ý &#253; small y, acute accent %FD p:before p:before { content:”\00fd”; } alert(“\375″);
&thorn; þ &#254; small thorn, Icelandic %FE p:before p:before { content:”\00fe”; } alert(“\376″);
&yuml; ÿ &#255; small y, dieresis or umlaut mark %FF p:before p:before { content:”\00ff”; } alert(“\377″);
Name   Numeric Description Hex ISO in CSS content Octal
&ensp; &#8194; en space u+2002 ISOpub p:before p:before { content:”\2002″;} alert(“\u2002″);
&emsp; &#8195; em space u+2003 ISOpub p:before p:before { content:”\2003″;} alert(“\u2003″);
&thinsp; &#8201; thin space u+2009 ISOpub p:before p:before { content:”\2009″;} alert(“\u2009″);
&zwnj; &#8204; zero width non-joiner u+200C NEW RFC 2070 p:before p:before { content:”\200C”;} alert(“\u200C”);
&zwj; &#8205; zero width joiner u+200D NEW RFC 2070 p:before p:before { content:”\200D”;} alert(“\u200d”);
&lrm; &#8206; left-to-right mark u+200E NEW RFC 2070 p:before p:before { content:”\200E”;} alert(“\u200e”);
&rlm; &#8207; right-to-left mark u+200F NEW RFC 2070 p:before p:before { content:”\200F”;} alert(“\u200f”);
&ndash; &#8211; en dash u+2013 ISOpub p:before p:before { content:”\2013″;} alert(“\u2013″);
&mdash; &#8212; em dash u+2014 ISOpub p:before p:before { content:”\2014″;} alert(“\u2014″);
&lsquo; &#8216; left single quotation mark u+2018 ISOnum p:before p:before { content:”\2018″;} alert(“\u2018″);
&rsquo; &#8217; right single quotation mark u+2019 ISOnum p:before p:before { content:”\2019″;} alert(“\u2019″);
&sbquo; &#8218; single low-9 quotation mark u+201A NEW p:before p:before { content:”\201A”;} alert(“\u201a”);
&ldquo; &#8220; left double quotation mark u+201C ISOnum p:before p:before { content:”\201C”;} alert(“\u201c”);
&rdquo; &#8221; right double quotation mark u+201D ISOnum p:before p:before { content:”\201D”;} alert(“\u201d”);
&bdquo; &#8222; double low-9 quotation mark u+201E NEW p:before p:before { content:”\201E”;} alert(“\u201e”);
&dagger; &#8224; dagger u+2020 ISOpub p:before p:before { content:”\2020″;} alert(“\u2020″);
&Dagger; &#8225; double dagger u+2021 ISOpub p:before p:before { content:”\2021″;} alert(“\u2021″);
&permil; &#8240; per mille sign u+2030 ISOtech p:before p:before { content:”\2030″;} alert(“\u2030″);
&lsaquo; &#8249; single left-pointing angle quotation mark
(lsaquo is proposed but not yet ISO standardised)
u+2039 ISO proposed p:before p:before { content:”\2039″;} alert(“\u2039″);
&rsaquo; &#8250; single right-pointing angle quotation mark
rsaquo is proposed but not yet ISO standardised
u+203A ISO proposed p:before p:before { content:”\203A”;} alert(“\u203a”);
Name   Numeric Description ISO in CSS content Octal
&bull; &#8226; bullet, a.k.a. black small circle
bullet is NOT the same as bullet operator — u+2219
u+2022 ISOpub alert(“\u2219″);
&hellip; &#8230; horizontal ellipsis, a.k.a. three dot leader u+2026 ISOpub alert(“\u2026″);
&prime; &#8242; prime, a.k.a. minutes, a.k.a. feet u+2032 ISOtech alert(“\u2032″);
&Prime; &#8243; double prime, a.k.a. seconds, a.k.a. inches u+2033 ISOtech alert(“\u2033″);
&oline; &#8254; overline, a.k.a. spacing overscore u+203E NEW alert(“\u203e”);
&frasl; &#8260; fraction slash u+2044 NEW alert(“\u8260″);
Name   Numeric Description ISO in CSS content Octal
&larr; &#8592; leftwards arrow u+2190 ISOnum alert(“\u2190″);
&uarr; &#8593; upwards arrow u+2191 ISOnum alert(“\u2191″);
&rarr; &#8594; rightwards arrow u+2192 ISOnum alert(“\u2192″);
&darr; &#8595; downwards arrow u+2193 ISOnum alert(“\u2193″);
&harr; &#8596; left right arrow u+2194 ISOamsa alert(“\u2194″);
&crarr; &#8629; downwards arrow with corner leftwards, a.k.a. carriage return u+21B5 NEW alert(“\u21b5″);
&lArr; &#8656; leftwards double arrow
can be used for ‘is implied by’
u+21D0 ISOtech alert(“\u21d0″);
&uArr; &#8657; upwards double arrow u+21D1 ISOamsa alert(“\u21d1″);
&rArr; &#8658; rightwards double arrow u+21D2 ISOtech alert(“\u21d2″);
&dArr; &#8659; downwards double arrow u+21D3 ISOamsa alert(“\ud1d3″);
&hArr; &#8660; left right double arrow u+21D4 ISOamsa alert(“\u21d4″);
No comments yet, leave yours!

Leave a Reply

Add <code> Some Code </code> by using this tags.