a blog by Christian Snodgrass
about programming, web and game design, and everything else

CSS content and Special Characters

While I was working on this theme, I wanted to use the content CSS property to add some right-pointing double-angle quotation marks (») for my list elements.

So, of course, I used the good ole » to add it in. However, it didn’t work!

It took me a bit to realize that you can’t use the regular HTML entities in content. Instead, you have to use the unicode hexadecimal format, which looks something like this: \bb

This is something that is easy enough to find if you’re looking for it, but it’s immediately apparent in most lessons and references to content.

Converting an HTML Entity to a Unicode Hexadecimal Code

There are many HTML Entity tables out there, but not that many Unicode Hexadecimal tables, so it’s handy to know to convert between the two. All you need is the HTML decimal entity (the ones that look like {, not the ones like ").

That number is in, you guessed it, decimal format. To convert to a Unicode Hexadecimal, we need to convert the decimal number to hexadecimal (I know, you’re shocked).

If you aren’t a computer programmer or math whiz, you may be unfamiliar with how to do this. Basically, you start with the largest power of 16 multiple that you can find that is smaller than the decimal number, subtract that and make the multiple your digit… okay, it’s not that hard, but there is a much quicker way.

Fire up something like your classic Windows Calculator and switch to it “Programmer” view (View > Programmer). Click the radio button that says “Dec”, type in your number, then hit the radio button that says “Hex” and viola, you have your hex number.

Just slap that number after a \ and you have your unicode hexadecimal character.

Even Easier – An HTML Entity and Unicode Hexadecimal Table

In case you don’t have a decimal to hexadecimal converter handy, here is a quick chart for you to reference of some of the more common (and not so common) symbols:

Character HTML Decimal Entity HTML Entity Name Unicode Hexadecimal Unicode Code Point (decimal)
! &33; \21 U+0021 (33)
&34; " \22 U+0022 (34)
# &35; \23 U+0023 (35)
$ &36; \24 U+0024 (36)
% &37; \25 U+0025 (37)
& &38; & \26 U+0026 (38)
&39; ' \27 U+0027 (39)
( &40; \28 U+0028 (40)
) &41; \29 U+0029 (41)
* &42; \2a U+002A (42)
+ &43; \2b U+002B (43)
, &44; \2c U+002C (44)
- &45; \2d U+002D (45)
. &46; \2e U+002E (46)
/ &47; \2f U+002F (47)
0 &48; \30 U+0030 (48)
1 &49; \31 U+0031 (49)
2 &50; \32 U+0032 (50)
3 &51; \33 U+0033 (51)
4 &52; \34 U+0034 (52)
5 &53; \35 U+0035 (53)
6 &54; \36 U+0036 (54)
7 &55; \37 U+0037 (55)
8 &56; \38 U+0038 (56)
9 &57; \39 U+0039 (57)
: &58; \3a U+003A (58)
; &59; \3b U+003B (59)
< &60; &lt; \3c U+003C (60)
= &61; \3d U+003D (61)
> &62; &gt; \3e U+003E (62)
? &63; \3f U+003F (63)
@ &64; \40 U+0040 (64)
A &65; \41 U+0041 (65)
B &66; \42 U+0042 (66)
C &67; \43 U+0043 (67)
D &68; \44 U+0044 (68)
E &69; \45 U+0045 (69)
F &70; \46 U+0046 (70)
G &71; \47 U+0047 (71)
H &72; \48 U+0048 (72)
I &73; \49 U+0049 (73)
J &74; \4a U+004A (74)
K &75; \4b U+004B (75)
L &76; \4c U+004C (76)
M &77; \4d U+004D (77)
N &78; \4e U+004E (78)
O &79; \4f U+004F (79)
P &80; \50 U+0050 (80)
Q &81; \51 U+0051 (81)
R &82; \52 U+0052 (82)
S &83; \53 U+0053 (83)
T &84; \54 U+0054 (84)
U &85; \55 U+0055 (85)
V &86; \56 U+0056 (86)
W &87; \57 U+0057 (87)
X &88; \58 U+0058 (88)
Y &89; \59 U+0059 (89)
Z &90; \5a U+005A (90)
[ &91; \5b U+005B (91)
\ &92; \5c U+005C (92)
] &93; \5d U+005D (93)
^ &94; \5e U+005E (94)
_ &95; \5f U+005F (95)
` &96; \60 U+0060 (96)
a &97; \61 U+0061 (97)
b &98; \62 U+0062 (98)
c &99; \63 U+0063 (99)
d &100; \64 U+0064 (100)
e &101; \65 U+0065 (101)
f &102; \66 U+0066 (102)
g &103; \67 U+0067 (103)
h &104; \68 U+0068 (104)
i &105; \69 U+0069 (105)
j &106; \6a U+006A (106)
k &107; \6b U+006B (107)
l &108; \6c U+006C (108)
m &109; \6d U+006D (109)
n &110; \6e U+006E (110)
o &111; \6f U+006F (111)
p &112; \70 U+0070 (112)
q &113; \71 U+0071 (113)
r &114; \72 U+0072 (114)
s &115; \73 U+0073 (115)
t &116; \74 U+0074 (116)
u &117; \75 U+0075 (117)
v &118; \76 U+0076 (118)
w &119; \77 U+0077 (119)
x &120; \78 U+0078 (120)
y &121; \79 U+0079 (121)
z &122; \7a U+007A (122)
{ &123; \7b U+007B (123)
| &124; \7c U+007C (124)
} &125; \7d U+007D (125)
~ &126; \7e U+007E (126)
&160; &nbsp; \a0 U+00A0 (160)
¡ &161; &iexcl; \a1 U+00A1 (161)
¢ &162; &cent; \a2 U+00A2 (162)
£ &163; &pound; \a3 U+00A3 (163)
¤ &164; &curren; \a4 U+00A4 (164)
¥ &165; &yen; \a5 U+00A5 (165)
¦ &166; &brvbar; \a6 U+00A6 (166)
§ &167; &sect; \a7 U+00A7 (167)
¨ &168; &uml; \a8 U+00A8 (168)
© &169; &copy; \a9 U+00A9 (169)
ª &170; &ordf; \aa U+00AA (170)
« &171; &laquo; \ab U+00AB (171)
¬ &172; &not; \ac U+00AC (172)
­ &173; &shy; \ad U+00AD (173)
® &174; &reg; \ae U+00AE (174)
¯ &175; &macr; \af U+00AF (175)
° &176; &deg; \b0 U+00B0 (176)
± &177; &plusmn; \b1 U+00B1 (177)
² &178; &sup2; \b2 U+00B2 (178)
³ &179; &sup3; \b3 U+00B3 (179)
´ &180; &acute; \b4 U+00B4 (180)
µ &181; &micro; \b5 U+00B5 (181)
&182; &para; \b6 U+00B6 (182)
· &183; &middot; \b7 U+00B7 (183)
¸ &184; &cedil; \b8 U+00B8 (184)
¹ &185; &sup1; \b9 U+00B9 (185)
º &186; &ordm; \ba U+00BA (186)
» &187; &raquo; \bb U+00BB (187)
¼ &188; &frac14; \bc U+00BC (188)
½ &189; &frac12; \bd U+00BD (189)
¾ &190; &frac34; \be U+00BE (190)
¿ &191; &iquest; \bf U+00BF (191)
À &192; &Agrave; \c0 U+00C0 (192)
Á &193; &Aacute; \c1 U+00C1 (193)
 &194; &Acirc; \c2 U+00C2 (194)
à &195; &Atilde; \c3 U+00C3 (195)
Ä &196; &Auml; \c4 U+00C4 (196)
Å &197; &Aring; \c5 U+00C5 (197)
Æ &198; &AElig; \c6 U+00C6 (198)
Ç &199; &Ccedil; \c7 U+00C7 (199)
È &200; &Egrave; \c8 U+00C8 (200)
É &201; &Eacute; \c9 U+00C9 (201)
Ê &202; &Ecirc; \ca U+00CA (202)
Ë &203; &Euml; \cb U+00CB (203)
Ì &204; &Igrave; \cc U+00CC (204)
Í &205; &Iacute; \cd U+00CD (205)
Î &206; &Icirc; \ce U+00CE (206)
Ï &207; &Iuml; \cf U+00CF (207)
Ð &208; &ETH; \d0 U+00D0 (208)
Ñ &209; &Ntilde; \d1 U+00D1 (209)
Ò &210; &Ograve; \d2 U+00D2 (210)
Ó &211; &Oacute; \d3 U+00D3 (211)
Ô &212; &Ocirc; \d4 U+00D4 (212)
Õ &213; &Otilde; \d5 U+00D5 (213)
Ö &214; &Ouml; \d6 U+00D6 (214)
× &215; &times; \d7 U+00D7 (215)
Ø &216; &Oslash; \d8 U+00D8 (216)
Ù &217; &Ugrave; \d9 U+00D9 (217)
Ú &218; &Uacute; \da U+00DA (218)
Û &219; &Ucirc; \db U+00DB (219)
Ü &220; &Uuml; \dc U+00DC (220)
Ý &221; &Yacute; \dd U+00DD (221)
Þ &222; &THORN; \de U+00DE (222)
ß &223; &szlig; \df U+00DF (223)
à &224; &agrave; \e0 U+00E0 (224)
á &225; &aacute; \e1 U+00E1 (225)
â &226; &acirc; \e2 U+00E2 (226)
ã &227; &atilde; \e3 U+00E3 (227)
ä &228; &auml; \e4 U+00E4 (228)
å &229; &aring; \e5 U+00E5 (229)
æ &230; &aelig; \e6 U+00E6 (230)
ç &231; &ccedil; \e7 U+00E7 (231)
è &232; &egrave; \e8 U+00E8 (232)
é &233; &eacute; \e9 U+00E9 (233)
ê &234; &ecirc; \ea U+00EA (234)
ë &235; &euml; \eb U+00EB (235)
ì &236; &igrave; \ec U+00EC (236)
í &237; &iacute; \ed U+00ED (237)
î &238; &icirc; \ee U+00EE (238)
ï &239; &iuml; \ef U+00EF (239)
ð &240; &eth; \f0 U+00F0 (240)
ñ &241; &ntilde; \f1 U+00F1 (241)
ò &242; &ograve; \f2 U+00F2 (242)
ó &243; &oacute; \f3 U+00F3 (243)
ô &244; &ocirc; \f4 U+00F4 (244)
õ &245; &otilde; \f5 U+00F5 (245)
ö &246; &ouml; \f6 U+00F6 (246)
÷ &247; &divide; \f7 U+00F7 (247)
ø &248; &oslash; \f8 U+00F8 (248)
ù &249; &ugrave; \f9 U+00F9 (249)
ú &250; &uacute; \fa U+00FA (250)
û &251; &ucirc; \fb U+00FB (251)
ü &252; &uuml; \fc U+00FC (252)
ý &253; &yacute; \fd U+00FD (253)
þ &254; &thorn; \fe U+00FE (254)
ÿ &255; &yuml; \ff U+00FF (255)
Π&338; &OElig; \152 U+0152 (338)
œ &339; &oelig; \153 U+0153 (339)
Š &352; &Scaron; \160 U+0160 (352)
š &353; &scaron; \161 U+0161 (353)
Ÿ &376; &Yuml; \178 U+0178 (376)
ƒ &402; &fnof; \192 U+0192 (402)
ˆ &710; &circ; \2c6 U+02C6 (710)
˜ &732; &tilde; \2dc U+02DC (732)
Α &913; &Alpha; \391 U+0391 (913)
Β &914; &Beta; \392 U+0392 (914)
Γ &915; &Gamma; \393 U+0393 (915)
Δ &916; &Delta; \394 U+0394 (916)
Ε &917; &Epsilon; \395 U+0395 (917)
Ζ &918; &Zeta; \396 U+0396 (918)
Η &919; &Eta; \397 U+0397 (919)
Θ &920; &Theta; \398 U+0398 (920)
Ι &921; &Iota; \399 U+0399 (921)
Κ &922; &Kappa; \39a U+039A (922)
Λ &923; &Lambda; \39b U+039B (923)
Μ &924; &Mu; \39c U+039C (924)
Ν &925; &Nu; \39d U+039D (925)
Ξ &926; &Xi; \39e U+039E (926)
Ο &927; &Omicron; \39f U+039F (927)
Π &928; &Pi; \3a0 U+03A0 (928)
Ρ &929; &Rho; \3a1 U+03A1 (929)
Σ &931; &Sigma; \3a3 U+03A3 (931)
Τ &932; &Tau; \3a4 U+03A4 (932)
Υ &933; &Upsilon; \3a5 U+03A5 (933)
Φ &934; &Phi; \3a6 U+03A6 (934)
Χ &935; &Chi; \3a7 U+03A7 (935)
Ψ &936; &Psi; \3a8 U+03A8 (936)
Ω &937; &Omega; \3a9 U+03A9 (937)
α &945; &alpha; \3b1 U+03B1 (945)
β &946; &beta; \3b2 U+03B2 (946)
γ &947; &gamma; \3b3 U+03B3 (947)
δ &948; &delta; \3b4 U+03B4 (948)
ε &949; &epsilon; \3b5 U+03B5 (949)
ζ &950; &zeta; \3b6 U+03B6 (950)
η &951; &eta; \3b7 U+03B7 (951)
θ &952; &theta; \3b8 U+03B8 (952)
ι &953; &iota; \3b9 U+03B9 (953)
κ &954; &kappa; \3ba U+03BA (954)
λ &955; &lambda; \3bb U+03BB (955)
μ &956; &mu; \3bc U+03BC (956)
ν &957; &nu; \3bd U+03BD (957)
ξ &958; &xi; \3be U+03BE (958)
ο &959; &omicron; \3bf U+03BF (959)
π &960; &pi; \3c0 U+03C0 (960)
ρ &961; &rho; \3c1 U+03C1 (961)
ς &962; &sigmaf; \3c2 U+03C2 (962)
σ &963; &sigma; \3c3 U+03C3 (963)
τ &964; &tau; \3c4 U+03C4 (964)
υ &965; &upsilon; \3c5 U+03C5 (965)
φ &966; &phi; \3c6 U+03C6 (966)
χ &967; &chi; \3c7 U+03C7 (967)
ψ &968; &psi; \3c8 U+03C8 (968)
ω &969; &omega; \3c9 U+03C9 (969)
ϑ &977; &thetasym; \3d1 U+03D1 (977)
ϒ &978; &upsih; \3d2 U+03D2 (978)
ϖ &982; &piv; \3d6 U+03D6 (982)
&8194; &ensp; \2002 U+2002 (8194)
&8195; &emsp; \2003 U+2003 (8195)
&8201; &thinsp; \2009 U+2009 (8201)
&8204; &zwnj; \200c U+200C (8204)
&8205; &zwj; \200d U+200D (8205)
&8206; &lrm; \200e U+200E (8206)
&8207; &rlm; \200f U+200F (8207)
&8211; &ndash; \2013 U+2013 (8211)
&8212; &mdash; \2014 U+2014 (8212)
&8216; &lsquo; \2018 U+2018 (8216)
&8217; &rsquo; \2019 U+2019 (8217)
&8218; &sbquo; \201a U+201A (8218)
&8220; &ldquo; \201c U+201C (8220)
&8221; &rdquo; \201d U+201D (8221)
&8222; &bdquo; \201e U+201E (8222)
&8224; &dagger; \2020 U+2020 (8224)
&8225; &Dagger; \2021 U+2021 (8225)
&8226; &bull; \2022 U+2022 (8226)
&8230; &hellip; \2026 U+2026 (8230)
&8240; &permil; \2030 U+2030 (8240)
&8242; &prime; \2032 U+2032 (8242)
&8243; &Prime; \2033 U+2033 (8243)
&8249; &lsaquo; \2039 U+2039 (8249)
&8250; &rsaquo; \203a U+203A (8250)
&8254; &oline; \203e U+203E (8254)
&8260; &frasl; \2044 U+2044 (8260)
&8364; &euro; \20ac U+20AC (8364)
&8465; &image; \2111 U+2111 (8465)
&8472; &weierp; \2118 U+2118 (8472)
&8476; &real; \211c U+211C (8476)
&8482; &trade; \2122 U+2122 (8482)
&8501; &alefsym; \2135 U+2135 (8501)
&8592; &larr; \2190 U+2190 (8592)
&8593; &uarr; \2191 U+2191 (8593)
&8594; &rarr; \2192 U+2192 (8594)
&8595; &darr; \2193 U+2193 (8595)
&8596; &harr; \2194 U+2194 (8596)
&8629; &crarr; \21b5 U+21B5 (8629)
&8656; &lArr; \21d0 U+21D0 (8656)
&8657; &uArr; \21d1 U+21D1 (8657)
&8658; &rArr; \21d2 U+21D2 (8658)
&8659; &dArr; \21d3 U+21D3 (8659)
&8660; &hArr; \21d4 U+21D4 (8660)
&8704; &forall; \2200 U+2200 (8704)
&8706; &part; \2202 U+2202 (8706)
&8707; &exist; \2203 U+2203 (8707)
&8709; &empty; \2205 U+2205 (8709)
&8711; &nabla; \2207 U+2207 (8711)
&8712; &isin; \2208 U+2208 (8712)
&8713; &notin; \2209 U+2209 (8713)
&8715; &ni; \220b U+220B (8715)
&8719; &prod; \220f U+220F (8719)
&8721; &sum; \2211 U+2211 (8721)
&8722; &minus; \2212 U+2212 (8722)
&8727; &lowast; \2217 U+2217 (8727)
&8730; &radic; \221a U+221A (8730)
&8733; &prop; \221d U+221D (8733)
&8734; &infin; \221e U+221E (8734)
&8736; &ang; \2220 U+2220 (8736)
&8756; &there4; \2234 U+2234 (8756)
&8764; &sim; \223c U+223C (8764)
&8773; &cong; \2245 U+2245 (8773)
&8776; &asymp; \2248 U+2248 (8776)
&8800; &ne; \2260 U+2260 (8800)
&8801; &equiv; \2261 U+2261 (8801)
&8804; &le; \2264 U+2264 (8804)
&8805; &ge; \2265 U+2265 (8805)
&8834; &sub; \2282 U+2282 (8834)
&8835; &sup; \2283 U+2283 (8835)
&8836; &nsub; \2284 U+2284 (8836)
&8838; &sube; \2286 U+2286 (8838)
&8839; &supe; \2287 U+2287 (8839)
&8853; &oplus; \2295 U+2295 (8853)
&8855; &otimes; \2297 U+2297 (8855)
&8869; &perp; \22a5 U+22A5 (8869)
&8901; &sdot; \22c5 U+22C5 (8901)
&8968; &lceil; \2308 U+2308 (8968)
&8969; &rceil; \2309 U+2309 (8969)
&8970; &lfloor; \230a U+230A (8970)
&8971; &rfloor; \230b U+230B (8971)
&9674; &loz; \25ca U+25CA (9674)
&9824; &spades; \2660 U+2660 (9824)
&9827; &clubs; \2663 U+2663 (9827)
&9829; &hearts; \2665 U+2665 (9829)
&9830; &diams; \2666 U+2666 (9830)

Related Articles


Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Back to Top